자바스크립트 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() 메소드는 window 접두사 없이 작성할 수 있습니다.

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

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

Example

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


실행 중지 방법?

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

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

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

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

Example

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

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

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


setInterval() 메소드

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

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

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

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

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

Example

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


실행 중지 방법?

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

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

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

Example

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


추가 예제

추가 간단한 timing

Example

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

timing 이벤트로 만든 시계

Example

출처: JavaScript Timing Events

댓글 남기기