최신 웹 개발 튜토리얼
 

JavaScript이벤트 타이밍


1
4
(5)
6
(7)
8
9
(10)
(11)
(12)

자바 스크립트는 시간 간격으로 실행할 수있다.

이것은 이벤트 타이밍이라고합니다.


이벤트 타이밍

윈도우 객체는 지정된 시간 간격으로 코드의 실행을 할 수 있습니다.

이 시간 간격은 이벤트 타이밍이라고합니다.

자바 스크립트와 함께 사용할 수있는 두 가지 주요 방법은 다음과 같습니다

  • setTimeout( function, milliseconds )
    밀리 초 지정된 번호를 기다린 후, 함수를 실행합니다.
  • setInterval( function, milliseconds )
    동일 setTimeout() 하지만, 연속 함수의 실행을 반복한다.

setTimeout()setInterval() 되는 HTML DOM 창 개체의 두 가지 방법입니다.


setTimeout() 메소드

window.setTimeout(function, milliseconds);

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

첫 번째 파라미터는 실행되는 함수이다.

두 번째 매개 변수는 실행 전에 (밀리 초)을 나타냅니다.

버튼을 클릭합니다. 3 초 기다린 페이지가 "안녕하세요"경고합니다 :

<button onclick="setTimeout(myFunction, 3000)">Try it</button>

<script>
function myFunction() {
    alert('Hello');
}
</script>
»그것을 자신을 시도

어떻게 실행을 중지하는 방법?

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

window.clearTimeout( timeoutVariable )

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

clearTimeout() 메소드에서 반환 변수 사용 setTimeout() :

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

함수가 이미 실행되지 않은 경우, 당신은 호출하여 실행을 중지 할 수 있습니다 clearTimeout() 메서드를 :

같은 예를 들어 위와 같이하지만, 추가 "정지"버튼 :

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>
»그것을 자신을 시도

setInterval() 메소드

setInterval() 메소드는 모든 주어진 시간 간격으로 주어진 함수를 반복합니다.

window.setInterval(function, milliseconds);

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

첫 번째 매개 변수는 실행하는 기능입니다.

두 번째 매개 변수는 각 실행 사이의 시간 간격의 길이를 나타냅니다.

이 예제라는 함수 실행 "myTimer" 한 번 (디지털 시계 등) 모든 초.

현재 시간을 표시합니다 :

var myVar = setInterval(myTimer, 1000);

function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
»그것을 자신을 시도

1 초 1000 밀리 초 있습니다.


어떻게 실행을 중지하는 방법?

clearInterval() 메서드는 지정된 함수의 실행을 중지 setInterval() 메소드를.

window.clearInterval( timerVariable )

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

clearInterval() 메소드에서 반환 된 변수를 사용 setInterval() :

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

같은 예를 들어 위와 같이, 그러나 우리는 "시간이 정지"버튼을 추가했습니다 :

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
»그것을 자신을 시도

예

더 예

또 다른 간단한 타이밍

타이밍 이벤트로 만든 시계