JavaScript
간격 및 시간 초과

통사론

• timeoutID = setTimeout (function () {}, 밀리 초)
• intervalID = setInterval (function () {}, 밀리 초)
• timeoutID = setTimeout (function () {}, 밀리 초, 매개 변수, 매개 변수, ...)
• intervalID = setInterval (function () {}, 밀리 초, 매개 변수, 매개 변수, ...)
• clearTimeout (timeoutID)
• clearInterval (intervalID)

비고

간격

function waitFunc(){
    console.log("This will be logged every 5 seconds");
}

window.setInterval(waitFunc,5000);

간격 제거

window.setInterval() 은 IntervalID 반환합니다. IntervalID 는 해당 간격의 계속 실행을 중지시키는 데 사용할 수 있습니다. 이렇게하려면 window.setInterval() 의 반환 값을 변수에 저장하고 해당 변수를 유일한 인수로 사용하여 clearInterval() 을 호출합니다.

function waitFunc(){
    console.log("This will be logged every 5 seconds");
}    

var interval = window.setInterval(waitFunc,5000);

window.setTimeout(function(){
    clearInterval(interval);
},32000);

그러면 This will be logged every 5 seconds 마다 5 초마다 This will be logged every 5 seconds 되지만 32 초 후에 기록됩니다. 따라서 메시지를 6 번 기록합니다.

제한 시간 제거

window.setTimout() 은 TimeoutID 반환합니다. TimeoutID 는 해당 타임 아웃이 실행되는 것을 중지시키는 데 사용할 수 있습니다. 이렇게하려면 window.setTimeout() 의 반환 값을 변수에 저장하고 해당 변수를 유일한 인수로 사용하여 clearTimeout() 을 호출합니다.

function waitFunc(){
    console.log("This will not be logged after 5 seconds");
}
function stopFunc(){
    clearTimeout(timeout);
}

var timeout = window.setTimeout(waitFunc,5000);
window.setTimeout(stopFunc,3000);

3 초 후에 타이머가 중지되므로 메시지를 로깅하지 않습니다.

재귀 적 setTimeout

함수를 무한정 반복하려면 setTimeout 을 재귀 적으로 호출 할 수 있습니다.

function repeatingFunc() {
    console.log("It's been 5 seconds. Execute the function again.");
    setTimeout(repeatingFunc, 5000);
}

setTimeout(repeatingFunc, 5000);

setInterval 과 달리 함수의 실행 시간이 지정된 지연보다 setInterval 함수가 실행되도록합니다. 그러나 함수 실행 사이에 일정한 간격을 보장하지는 않습니다. 이 동작은 또한 setTimeout 대한 재귀 호출 전에 예외가 반복되지 않도록하기 때문에 예외입니다. setInterval 은 예외에 관계없이 무기한 반복됩니다.

setTimeout, 작업 순서, clearTimeout

setTimeout

• 지정된 밀리 초를 기다린 후 함수를 실행합니다.
• 함수의 실행을 지연시키는 데 사용됩니다.

구문 : setTimeout(function, milliseconds) 또는 window.setTimeout(function, milliseconds)

예 : 이 예제는 1 초 후에 콘솔에 "hello"를 출력합니다. 두 번째 매개 변수는 밀리 초 단위이므로 1000 = 1 초, 250 = 0.25 초 등입니다.

setTimeout(function() {
    console.log('hello');
}, 1000);

setTimeout 문제

for 루프에서 setTimeout 메소드를 사용하는 경우 :

for (i = 0; i < 3; ++i) {
  setTimeout(function(){
    console.log(i);
  }, 500);
}

값 3 three 번 출력합니다. 이는 올바르지 않습니다.

이 문제의 해결 방법 :

for (i = 0; i < 3; ++i) {
  setTimeout(function(j){
    console.log(i);
  }(i), 1000);
}

값 0 , 1 , 2 출력합니다. 여기에서 i 를 매개 변수 ( j )로 함수에 전달합니다.

운영 순서

또한 Javascript가 단일 스레드이며 전역 이벤트 루프를 사용하기 때문에 setTimeout 을 사용하여 0 지연으로 setTimeout 을 호출하여 실행 큐 끝에 항목을 추가 할 수 있습니다. 예 :

setTimeout(function() {
    console.log('world');
}, 0);

console.log('hello');

실제로 출력됩니다 :

hello
world

또한 여기서 0 밀리 초는 setTimeout 내부의 함수가 즉시 실행된다는 것을 의미하지 않습니다. 실행 큐에 남아있는 항목을 실행하는 것보다 약간 더 많은 시간이 소요됩니다. 이 메시지는 대기열의 끝으로 전달됩니다.

시간 초과 취소

clearTimeout () : setTimeout() 지정된 함수의 실행을 중지합니다 .

구문 : clearTimeout (timeoutVariable) 또는 window.clearTimeout (timeoutVariable)

예 :

var timeout = setTimeout(function() {
    console.log('hello');
}, 1000);

clearTimeout(timeout); // The timeout will no longer be executed

간격

표준

변수를 만들 필요는 없지만 clearInterval과 함께 변수를 사용하면 현재 실행중인 간격을 중지 할 수 있으므로 좋습니다.

var int = setInterval("doSomething()", 5000 ); /* 5 seconds */
var int = setInterval(doSomething, 5000 ); /* same thing, no quotes, no parens */

doSomething 함수에 매개 변수를 전달해야하는 경우 첫 번째 매개 변수를 넘어서 setInterval에 추가 매개 변수로 전달할 수 있습니다.

겹치지 않고

위와 같이 setInterval은 5 초 (또는 설정 한 시간)마다 실행됩니다. 함수 doSomething이 실행되는 데 5 초 이상 걸리는 경우에도 마찬가지입니다. 그것은 문제를 야기 할 수 있습니다. doSomething의 실행 사이에 일시 중지가 있는지 확인하려는 경우 다음을 수행 할 수 있습니다.

(function(){

   doSomething();

   setTimeout(arguments.callee, 5000);

})()