[JavaScript] STUDY 10 - window 객체의 속성과 메서드

JavaScript/ES6 이전

[JavaScript] STUDY 10 - window 객체의 속성과 메서드

PSEveloper ㅣ 2020. 4. 2. 18:57

window 객체의 속성과 메서드

1. window 객체의 타이머 관련 메서드

1) JavaScript 타이머

① 일정한 시간이 지난 후 지정한 기능을 수행하는 타이머

② 일정한 시간 간격마다 지정한 기능을 수행하는 타이머

2) window.setTimeout 메서드

- 일정한 시간이 지난 후 지정한 기능을 수행하는 타이머를 등록

3) window.setInterval 메서드

- 일정한 시간 간격마다 지정한 기능을 수행하는 타이머를 등록

① 매개변수

function : 일정 시간 후에, 또는 일정 시간 간격마다 실행할 기능
milliseconds : 일정 시간(ms 단위의 숫자)

② 반환 값

Timer ID : 등록한 타이머의 ID (number)

window.setTimeout ( function, milliseconds );

window.setInterval ( function, milliseconds );

4) window.clearTimeout 메서드

- setTimeout 메서드로 등록한 타이머를 해제

5) window.clearInterval 메서드

- setInterval 메서드로 등록한 타이머를 해제

① 매개변수

- timerID : 해제하고자 하는 타이머의 ID

clearTimeout 메서드의 매개변수 : setTimeout 메서드의 반환 값
clearInterval 메서드의 매개변수 : setInterval 메서드의 반환 값

window.clearTimeout( timerId );

window.clearInterval( timerId );

타이머 예제

<script>

    // 2초가 지난 후에
    // → window.setTimeout 메서드로 타이머를 등록해서 구현(인자는 총 2개 → function, ms)
    // → 아래 문장은 타이머를 등록한다. 이렇게 등록한 타이머에 의해 2000ms가 지나면 첫 번째 인자로 넣어준 함수가 실행된다.
    window.setTimeout(function () { console.log("Hello World!"); }, 2000);
    // 타이머는 등록만 해놓을 뿐 실행은 브라우저가 하는 것이다.
    // 그러므로 window ~ 2000); 문장은 브라우저에 바로 출력되고 콘솔창에 "Hello World!"는 2초 뒤에 출력되는 것이다.

    //-----------------------------------------------------------------
    // 함수의 매개변수에 함수를 전달하고자 할 때 이렇게 전달할 함수를 미리 선언해두고
    // 함수의 식별자를 통해 함수의 매개변수에 전달할 수 있다.
    function sayMerong () {
        console.log("메롱!");
    }

    // 1초마다
    // → window.setInterval 메서드로 타이머를 등록해서 구현
    var timerId = window.setInterval(sayMerong, 1000);

    console.log("SET: timerId = " + timerId);
    // → SET: timerId = 2;

    //-----------------------------------------------------------------
    // 등록해놓은 타이머를 해제

    window.setTimeout(function () {
        // 이 함수는 setTimeout 메서드로 등록한 타이머에 의해 5000ms가 지난 후에 실행된다.
        console.log("CLEAR: timerId = " + timerId);

        // 등록해놓은 타이머를 해제하기 위해서는 해제하고자 하는 타이머의 ID를 알고 있어야 한다.
        // 타이머 ID는 window.setTimeout 메서드 또는 window.setInterval 메서드가 타이머를 등록한 후 반환하는 값이다.
        // 따라서 나중에 타이머를 해제하기 위해서는 이 메서드들이 반환하는 값을 변수에 대입해놓아야 한다
        window.clearInterval(timerId);
        // → 변수 timerId에는 위에서 setInterval 메서드로 등록한 타이머의 ID가 저장되어 있다
        //  따라서 clearInterval 메서드는 위에서 setInterval 메서드로 등록한 타이머를 해제한다.

    }, 5000);

</script>

연습문제

2초에 한 번씩 console.log 메서드를 이용해 개발자 도구의 콘솔 창에 다음과 같은 메시지 다섯 개를 출력하는 JavaScript 프로그램을 작성하라. (메시지는 다섯 개만 출력하고 프로그램이 끝난다.)

1. Time is gold.

2. No sweat, no sweet.

3. Asking costs nothing.

4. Step by step goes a long way.

5. You will never know until you try.

<script>
    var sayings = [
        "1. Time is gold.",
        "2. No sweat, no sweet.",
        "3. Asking costs nothing.",
        "4. Step by step goes a long way.",
        "5. You will never know until you try."
    ];

    var i = 0;

    var timerId = window.setInterval(function () {
        console.log(sayings[i]);

        i++;

        if ( i == sayings.length)
            window.clearInterval(timerId);
    }, 2000);

</script>

PSE's blog