JS_Basic 지식에서 setTimeout()과 setInterval()이 호출되어 실행될 때의 사용법

정의
setTimeout() 및 setInterval()은 지연 및 예약된 작업을 처리하는 데 자주 사용됩니다. setTimeout() 메서드는 지정된 밀리초 후에 함수나 계산된 표현식을 호출하는 데 사용되는 반면, setInterval()은 ClearInterval이 이를 지울 때까지 지정된 밀리초마다 루프에서 함수나 표현식을 호출할 수 있습니다.
정의에서 전자는 한 번 실행되고 후자는 여러 번 실행될 수 있다는 점을 제외하면 두 함수가 매우 유사하다는 것을 알 수 있습니다. 두 번째 매개변수는 실행될 코드 또는 핸들입니다. 2개는 지연 시간입니다.
매우 간단한 정의이고 사용하기 쉽지만 때로는 우리가 상상한 정확한 시간에 코드가 호출되지 않아 매우 혼란스럽습니다


간단한 예
보세요 간단한 예시로 2초 동안 간단한 페이지를 로딩한 후 Delayed Alert!

코드 복사 코드는 다음과 같습니다.

setTimeout('document.write("Delayed Alert!");', 2000);

합리적으로 보입니다. setInterVal()의 예를 살펴보겠습니다. method

코드 복사 코드는 다음과 같습니다.

var num = 0; var i = setInterval(function() {
num ;
var date = new Date();
document.write(date.getMinutes() ':' date.getSeconds() ': ' 날짜. getMilliseconds() '
');
                                                                                                                                                                10회 녹화 후에는 현재 시간(분:초:밀리초)이 삭제되어 더 이상 녹화되지 않습니다. 코드 실행 시간이 실행 ​​시간을 기록하지 못할 수도 있지만 시간 간격은 동일해야 한다는 점을 고려하여 결과를 살펴보세요

코드 복사

코드는 다음과 같습니다.:38:116:39:130:40:144:41:158

:42:172

:43:186
:44:200
:45:214
:46:228
:47:242
:48:256



왜

시간 간격이 거의 1000밀리초인데 정확하지 않은 이유는 무엇입니까? 그 이유는 JavaScript 타이머에 대해 오해가 있기 때문입니다. JavaScript는 실제로 단일 스레드 환경에서 실행됩니다. 즉, 타이머는 향후 특정 시간에만 코드가 실행되도록 계획하고 있으며 구체적인 실행 시간을 보장할 수 없습니다. 페이지 수명 주기 동안 다른 코드가 다른 시간에 JavaScript 프로세스를 제어할 수 있기 때문입니다. 페이지가 다운로드된 후 코드 실행, 이벤트 핸들러, Ajax 콜백 함수는 모두 동일한 스레드를 사용합니다. 실제로 브라우저는 특정 시점에 실행될 특정 프로그램의 우선 순위를 정렬하고 할당하는 역할을 합니다.
효과를 확대해서 시간이 많이 걸리는 작업을 추가해 보겠습니다

코드 복사

코드는 다음과 같습니다.

function test() {
for (var i = 0; i < 500000; i ) {
var div = document.createElement('div');
div.setAttribute ('id', 'testDiv');
document.body.appendChild(div);
document.body.removeChild(div);
}
}
setInterval(test, 10 );
var num = 0;
var I = SetInterval (function () {
Num;
var date = new date (); ':' date.getSeconds() ':' 날짜 >

결과를 확인하기 위해 다른 예정된 작업을 추가했습니다

복사 코드

코드는 다음과 같습니다.:9:222:12:482:16:8

:19: 143

:22:631
:25:888
:28:712
:32:381
:34:146
:35:565
:37:406


이제 효과는 확실한데, 간격은 더욱 작아졌습니다. 3초가 넘는데, 간격이 매우 불규칙합니다.
자바스크립트는 타임라인에서 실행되는 것으로 생각할 수 있습니다. 페이지가 로드되면 가장 먼저 실행되는 것은 페이지 수명 주기에서 나중에 사용할 메서드와 변수 선언, 데이터 처리입니다. 그 후 JavaScript 프로세스는 더 많은 코드가 실행될 때까지 기다립니다. 프로세스가 유휴 상태이면 다음 코드 조각이 트리거됩니다

주요 JavaScript 프로세스 외에도 다음 번 프로세스가 유휴 상태일 때 실행되는 코드 대기열도 필요합니다. 페이지 수명 주기가 진행됨에 따라 코드는 실행 순서대로 대기열에 추가됩니다. 예를 들어 버튼을 누르면 해당 이벤트 핸들러가 대기열에 추가되고 다음 가능한 시간에 실행됩니다. Ajax 응답이 수신되면 콜백 함수 코드가 대기열에 추가됩니다. JavaScript의 코드는 즉시 실행되지 않지만 프로세스가 유휴 상태가 되는 즉시 실행됩니다. 타이머가 대기열에서 작동하는 방식은 특정 시간이 경과할 때 코드가 삽입된다는 것입니다. 이는 코드가 즉시 실행된다는 의미가 아니라 가능한 한 빨리 실행된다는 의미일 뿐입니다.

이 사실을 알고 나면 정확한 시간 제어를 원한다면 JavaScript의 setTimeout 기능에 의존할 수 없다는 것을 이해할 수 있습니다.


반복 타이머

setInterval()을 사용하여 생성된 타이머는 지정된 효과가 달성되면 다음 예와 같이 코드가 루프에서 실행되도록 할 수 있습니다.


코드 복사

코드는 다음과 같습니다.var my_interval = setInterval(function () {      if (조건) {                                                                           >
그러나 이 방법의 문제점은 코드가 다시 큐에 추가되기 전에 타이머 코드가 실행되지 않을 수 있다는 것입니다. 결과적으로 루프의 판단 조건이 정확하지 않고 코드가 일시 중지되지 않고 여러 번 실행됩니다. 사이. 그러나 JavaScript는 이 문제를 해결했습니다. setInterval()을 사용할 때 타이머 코드는 타이머의 다른 코드 인스턴스가 없을 때만 대기열에 삽입됩니다. 이렇게 하면 타이머 코드가 대기열에 추가되는 최소 시간 간격이 지정된 간격이 됩니다.

이러한 규칙은 두 가지 문제를 가져옵니다

1.1. 일부 간격을 건너뜁니다.
2.2 여러 타이머의 코드 실행 간격이 예상보다 작을 수 있습니다
이 두 가지 단점 때문에 setTimeout()을 사용하여 반복 타이머를 구현할 수 있습니다.

코드 복사 코드는 다음과 같습니다. 함수가 실행될 때마다 새 타이머가 생성됩니다. 두 번째 setTimeout() 호출은 agrument.callee를 사용하여 현재 실행 중인 함수에 대한 참조를 얻고 또 다른 새 타이머를 설정합니다. 이렇게 하면 코드 실행이 완료되기 전에 새 타이머가 삽입되지 않으며 연속 실행을 방지하려면 다음 타이머 코드가 실행되기 전에 최소한 지정된 시간 간격이 있어야 합니다.

코드 복사

코드는 다음과 같습니다.

setTimeout(function () { var div = document.getElementById('moveDiv'); var left =parseInt(div.style.left) 5; div.style.left = left 'px'; if (left < 200) {                 setTimeout(arguments.callee, 50); 좌표가 200보다 크면 중지합니다.