자바스크립트 Timing Events


1
2
3
4
5
6
7
8
9
10
11
12

자바스크립트는 time-intervals로 실행할 수 있습니다.

이것은 timing 이벤트(events)를 호출한 것입니다.


Timing 이벤트(Events)

window 객체는 지정된 시간 간격으로 코드를 실행할 수 있습니다.

이 시간 간격(time intervals)을 timing 이벤트(events)라고 합니다.

자바스크립트로 사용하는 2가지 방법은:

  • setTimeout(function, milliseconds)
    지정한 밀리 초를 기다린 후 함수를 실행합니다.
  • setInterval(function, milliseconds)
    setTimeout()과 같지만, 함수를 계속 반복 실행합니다.

setTimeout() 메소드


window.setTimeout(function, milliseconds);

window.setTimeout() 메소드는 window 접두사 없이 작성할 수 있습니다.

첫 번째 매개변수는 실행할 함수입니다.

두 번째 매개변수는 실행하기 전 기다리는 밀리 초 수를 나타냅니다.

Example

“Try it” 클릭하면, 3초를 기다리고, 페이지는 “Hello”를 표시(alert)합니다.


"Try it" 클릭하면, 3초를 기다리고, 페이지는 "Hello"를 표시(alert)합니다.


실행 중지 방법?

clearTimeout() 메소드는 setTimeout()에 지정된 함수의 실행을 중지합니다..


window.clearTimeout(timeoutVariable)

window.clearTimeout() 메소드는 window 접두사 없이 작성할 수 있습니다.

clearTimeout() 메소드는 setTimeout()이 반환한 변수(variable)를 사용합니다:


myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

함수가 아직 실행되지 않았으면, clearTimeout() 메소드를 호출하여 실행을 중지할 수 있습니다:

Example

“Try it”을 클릭하고, 3초를 기다리면 페이지는 “Hello”를 표시합니다(alert).

“Stop”을 클릭하면, 첫 번째 함수가 실행되지 않습니다.

(3초가 되기 전에, “Stop”을 클릭해야 합니다.)


"Try it"을 클릭하고, 3초를 기다리면 페이지는 "Hello"를 표시합니다(alert).

"Stop"을 클릭하면, 첫 번째 함수가 실행되지 않습니다.

(3초가 되기 전에, "Stop"을 클릭해야 합니다.)


setInterval() 메소드

setInterval() 메소드는 지정한 시간 간격마다 지정한 함수를 반복합니다.


window.setInterval(function, milliseconds);

window.setInterval() 메소드는 window 접두사 없이 작성할 수 있습니다.

첫 번째 매개변수는 실행할 함수입니다.

두 번째 매개변수는 각 실행 사이의 시간 간격(time-interval)입니다.

이 예제는 매초마다 “myTimer”라는 함수를 실행합니다 (디지털 시계처럼).

Example

이 페이지의 스크립트가 이 시계를 시작합니다:


이 페이지의 스크립트가 이 시계를 시작합니다:


실행 중지 방법?

clearInterval() 메소드는 setInterval() 메소드에 지정된 함수의 실행을 중지합니다.


window.clearInterval(timerVariable)

window.clearInterval() 메소드는 window 접두사 없이 작성할 수 있습니다.

clearInterval() 메소드는 setInterval()에서 반환된 변수(variable)를 사용합니다:


myVar = setInterval(function, milliseconds);
clearInterval(myVar);

Example

이 페이지의 스크립트가 이 시계를 시작합니다:


이 페이지의 스크립트가 이 시계를 시작합니다:


추가 예제

추가 간단한 timing

Example

“Try it”을 클릭합니다. 2, 4, 6초가 지나가면 표시됩니다.




Click on "Try it". I will display when two, four, and six seconds have passed.

timing 이벤트로 만든 시계

Example




출처: JavaScript Timing Events

Leave a comment