차이점이 있습니까?

예. 제한 시간은 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 이었지만 지금도 우리 뒤에 있습니다.

답변

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

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

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);

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