[javascript] setTimeout 또는 setInterval?

내가 알 수있는 한이 두 가지 자바 스크립트는 동일한 방식으로 작동합니다.

옵션 A :

function myTimeoutFunction()
{
    doStuff();
    setTimeout(myTimeoutFunction, 1000);
}

myTimeoutFunction();

옵션 B :

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);

setTimeoutsetInterval 사용에 차이가 있습니까?



답변

그들은 본질적으로 같은 일을하려고하지만 1000ms를 기다리고 함수를 실행 한 다음 다른 시간 초과를 설정하기 때문에 접근 방식 setInterval보다 접근 방식이 더 정확 합니다. 따라서 대기 시간은 실제로 1000ms 이상입니다 (또는 함수를 실행하는 데 시간이 오래 걸리면 더 큽니다).setTimeoutsetTimeout

정확히 1000ms마다 setInterval실행될 것이라고 생각할 수도 있지만 JavaScript는 다중 스레드 언어가 아니기 때문에 지연 될 것입니다. 즉, 스크립트의 다른 부분이 실행되면 간격이 그 끝날 때까지 기다리십시오.setInterval

이 Fiddle 에서는 시간 초과가 뒤 떨어지고 간격이 거의 항상 거의 1 호출 / 초 (스크립트가 시도하는 시간)임을 알 수 있습니다. 상단의 속도 변수를 20과 같은 작은 값으로 변경하면 (초당 50 회 실행 됨) 간격이 초당 평균 50 회에 도달하지 않습니다.

지연은 거의 무시할 만하지 만 실제로 정확한 것을 프로그래밍하는 경우 자체 조정 타이머 를 사용해야합니다 (기본적으로 타임 아웃 기반 타이머는 생성 된 지연에 따라 지속적으로 조정됩니다)


답변

차이점이 있습니까?

예. 제한 시간은 setTimeout ()이 호출 된 후 일정 시간 동안 실행됩니다. 인터벌은 이전 인터벌이 발생한 후 특정 시간 동안 실행됩니다.

doStuff () 함수를 실행하는 데 시간이 걸리면 차이점을 알 수 있습니다. 예를 들어,로 setTimeout / setInterval에 대한 호출 .,로 시간 초과 / 간격 발생 *및로 JavaScript 코드 실행을 [-----]나타내는 경우 타임 라인은 다음과 같습니다.

Timeout:

.    *  .    *  .    *  .    *  .
     [--]    [--]    [--]    [--]

Interval:

.    *    *    *    *    *    *
     [--] [--] [--] [--] [--] [--]

다음 문제는 JavaScript가 이미 이전 작업 처리와 같은 작업을 수행하는 동안 간격이 발생하는 경우입니다. 이 경우 간격이 기억되며 이전 핸들러가 완료되고 브라우저로 제어를 리턴하는 즉시 발생합니다. 예를 들어 때때로 짧거나 ([-]) 때로는 ([—–]) doStuff () 프로세스의 경우 :

.    *    *        *        *    *
     [-]  [-----][-][-----][-][-]  [-]

• 코드를 바로 실행할 수없고 대신 보류중인 간격 발생을 나타냅니다.

따라서 간격은 일정을 다시 잡기 위해 ‘잡기’를 시도합니다. 그러나 이들은 서로를 대기열에 넣지 않습니다. 간격 당 하나의 실행 만 보류 할 수 있습니다. (모두 대기열에 있으면 브라우저는 계속해서 확장 된 미결 실행 목록으로 남게됩니다!)

.    *            x            x
     [------][------][------][------]

x는 실행할 수 없거나 보류중인 간격 발생을 나타내므로 대신 삭제되었습니다.

doStuff () 함수가 설정된 간격보다 습관적으로 실행하는 데 시간이 오래 걸리면 브라우저가 서비스를 시도하는 데 100 % CPU를 소모하고 응답 성이 떨어질 수 있습니다.

어느 것을 사용하고 왜?

Chained-Timeout은 브라우저에 자유 시간 슬롯을 보장합니다. 간격은 브라우저 UI 가용성을 희생하면서 실행중인 기능이 예약 된 시간에 최대한 가깝게 실행되도록합니다.

일회성 애니메이션에 대한 간격을 가능한 한 매끄럽게하고 싶었지만 체인 타임 아웃은 페이지가로드되는 동안 항상 진행되는 애니메이션에 더 정중합니다. 덜 까다로운 용도 (예 : 30 초마다 사소한 업데이터 실행 등)를 안전하게 사용할 수 있습니다.

브라우저 호환성 측면에서 setTimeout은 setInterval보다 우선하지만 오늘 만나게 될 모든 브라우저는 두 가지를 모두 지원합니다. 지난 몇 년 동안의 마지막 충격은 WinMo <6.5의 IE Mobile 이었지만 지금도 우리 뒤에 있습니다.


답변

setInterval ()

setInterval()간격에 도달하면 지정된 스크립트를 반복적으로 실행할 수있는 기본 기능이있는 시간 간격 기반 코드 실행 방법입니다. 스크립트 작성자 가 기본적으로 루프하기 때문에 루프하기 위해 콜백 함수에 중첩 되어서는 안됩니다 . 호출하지 않으면 간격마다 계속 발사됩니다 .clearInterval()

애니메이션 또는 시계 눈금에 대한 코드를 반복하려면을 사용하십시오 setInterval().

function doStuff() {
    alert("run your code here when time interval is reached");
}
var myTimer = setInterval(doStuff, 5000);

setTimeout ()

setTimeout()간격에 도달하면 스크립트를 한 번만 실행하는 시간 기반 코드 실행 방법입니다 . 그것은 것입니다 하지 당신이 중첩에 의해 루프 스크립트를, 기어 않는 한 다시 반복 setTimeout()그것을 실행 호출 함수의 객체의 내부. 반복하도록 설정하면를 호출하지 않는 한 간격으로 계속 발사됩니다 clearTimeout().

function doStuff() {
    alert("run your code here when time interval is reached");
}
var myTimer = setTimeout(doStuff, 5000);

지정된 시간이 지난 후 한 번만 발생하려면을 사용하십시오 setTimeout(). 지정된 간격에 도달하면 한 번만 실행되기 때문입니다.


답변

setInterval을 사용하면 향후 코드 실행을 쉽게 취소 할 수 있습니다. setTimeout을 사용하는 경우 나중에 취소하려는 경우 타이머 ID를 추적해야합니다.

var timerId = null;
function myTimeoutFunction()
{
    doStuff();
    timerId = setTimeout(myTimeoutFunction, 1000);
}

myTimeoutFunction();

// later on...
clearTimeout(timerId);

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
var timerId = setInterval(myTimeoutFunction, 1000);

// later on...
clearInterval(timerId);


답변

내가 찾아 setTimeout당신은 시간 제한을 취소 할 경우 사용하기 쉬운 방법 :

function myTimeoutFunction() {
   doStuff();
   if (stillrunning) {
      setTimeout(myTimeoutFunction, 1000);
   }
}

myTimeoutFunction();

또한 함수에서 문제가 발생하면 매 초마다 오류를 반복하는 대신 첫 번째 오류에서 반복이 중지됩니다.


답변

매우 다른 점은 그들의 목적에 있습니다.

setInterval()
   -> executes a function, over and over again, at specified time intervals

setTimeout()
   -> executes a function, once, after waiting a specified number of milliseconds

그렇게 간단합니다

자세한 내용은 여기 http://javascript.info/tutorial/settimeout-setinterval


답변

setInterval 내에서 일부 기능을 실행하면 시간 초과->보다 더 많은 시간이 작동하여 브라우저가 멈 춥니 다.

예 : doStuff () 는 1500 초가 걸립니다. 실행하려면 다음을 수행하십시오. setInterval (doStuff, 1000);

1) 브라우저에서 doStuff () 를 실행 하면 1.5 초가 걸립니다. 실행될;

2) ~ 1 초 후에 doStuff ()를 다시 실행하려고 시도 합니다. 그러나 이전 doStuff () 는 여전히 실행됩니다-> 브라우저는이 실행을 대기열에 추가합니다 (처음 완료 후 실행).

3,4, ..) 다음 반복을 위해 실행 대기열에 추가하는 것과 동일하지만 이전의 doStuff () 가 여전히 진행 중입니다 …

결과적으로 브라우저가 멈췄습니다.

이 동작을 방지하려면 가장 좋은 방법은 setTimeout 내에서 setTimeout을 실행하여 setInterval을 에뮬레이트하는 것 입니다.

setTimeout 호출 사이의 시간 초과를 정정하려면 JavaScript의 setInterval 기술 대신 자체 수정 대안을 사용할 수 있습니다 .