JavaScript 타이밍

시간 함수는 특정 시간에 기능을 실행할 수 있게 해주는 함수입니다.

시간 함수를 사용하여 코드 실행을 지연할 수 있으며, 이를 통해 이벤트가 발생한 정확한 시점에 코드를 완료하지 않을 수 있습니다.

JavaScript에는 두 가지 타이머 함수가 있습니다:

• setTimeout(function, milliseconds) -지정된 밀리초 후에 함수(function)를 실행합니다

• setInterval(function, milliseconds) -setTimeout()와 동일하지만, 함수를 반복적으로 실행합니다(function)

이 두 가지setTimeout()와setInterval()은 메서드윈도우 객체، 프레임워크 접두어 없이 쓸 수 있습니다。

setTimeout() 메서드

setTimeout()메서드는 일정 시간 후에 함수를 한 번 실행하거나 지정된 코드 부분을 실행합니다。

문법：

window.setTimeout(function, milliseconds)

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

두 번째 매개변수는 실행 전의 밀리초를 지시합니다 (1초 = 1000밀리초).

버튼을 클릭하면2초 후에 경고 메시지가 표시됩니다:

<button onclick="setTimeout(myFunc,　2000)">클릭</button>/button>
<script>
function myFunc() {
　　alert("Hello World");
}
</script>

코드 실행을 중지하십시오

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

문법：

window.clearTimeout(var)

clearTimeout()메서드를 사용하여 setTimeout()에서 반환된 변수를 사용합니다。

　　t = setTimeout();
　　clearTimeout(t);

아직 실행되지 않은 함수는 호출하여clearTimeout()이 메서드를 사용하여 실행을 중지합니다。

위의 예제와 같지만 “중지” 버튼을 추가했습니다：

<button onclick="myFunc()">클릭</button>/button>
<button onclick="myStopFunc()">警报 중지</button>/button>
<script>
var t;
function myFunc() {
　　t = setTimeout(function(){ alert("Hello world"); },　2000);
}
function myStopFunc() {
　　clearTimeout(t);
}
</script>

setInterval() 메서드

setInterval()이 메서드는 함수를 반복적으로 호출하며, 각 호출 사이에 고정된 시간 지연이 있습니다。

문법：

window.setInterval(function, milliseconds)

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

두 번째 매개변수는 각 실행 사이의 시간 간격의 길이를 지시합니다。

이 예제는 매초에一次 "startTimer" 함수를 실행합니다(예: 디지털 시계):

//매1
setInterval(startTimer,　1000);
function　startTimer()　{
　　var　date　=　new　Date();
　　document.getElementById("result").innerHTML　=　date.toLocaleTimeString();
}

코드 실행을 중지하십시오

clearInterval()setInterval()에서 지정된 함수의 실행을 중지하는 메서드입니다

문법：

window.clearInterval(var)

clearInterval()setInterval()에서 반환된 변수를 사용하여 메서드를 호출합니다

　　t　=　setInterval();
　　clearInterval(t);

위의 예제와 같지만 “중지” 버튼을 추가했습니다：

//매1
var　t　=　setInterval(startTimer,　1000);
function　startTimer()　{
　　var　date　=　new　Date();
　　document.getElementById("result").innerHTML　=　date.toLocaleTimeString();
}
//setInterval()를 사용하여 생성된 반복 작업을 취소합니다
function　stopTimer()　{
　　　clearInterval(t);
}

更多示例

아래의 “계산 시작” 버튼을 클릭하여 타이머를 시작합니다. “계산 중지” 버튼을 클릭하여 계산을 중지합니다：

아래의 “진행 시작” 버튼을 클릭하여 진행 표시줄을 시작합니다. “진행 중지” 버튼을 클릭하여 진행 표시줄을 중지합니다：