setTimeout 또는 setInterval?

Question

멀리로 말할 수 있는,이러한 두 개의 조각을 자바스크립트와 동일하게 동작하는 방법:

옵션:

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

myTimeoutFunction();

옵션 B:

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);

거기에 어떤 차이가 있을 사용하여 setTimeout 고 setInterval?

Answer 1

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

Altough 사람은 그렇게 생각할 수 있습니다 setInterval 실행됩니다 바로 그거죠 1000ms마다 주목하는 것이 중요합니다 setInterval JavaScript는 멀티 스레드 언어가 아니기 때문에 지연됩니다. 즉, 스크립트의 다른 부분이 실행중인 경우 간격이 끝날 때까지 기다려야합니다.

~ 안에 이 바이올린, 당신은 타임 아웃이 뒤쳐 질 것이라는 것을 분명히 알 수 있지만, 간격은 거의 1 호출/초 (스크립트가 시도하는) 거의 모든 시간입니다. 상단의 속도 변수를 20과 같은 작은 것으로 변경하면 (초당 50 회 실행하려고 시도 함) 간격은 초당 평균 50 회 반복에 도달하지 않습니다.

지연은 거의 항상 무시할 수 있지만, 정말로 정확한 것을 프로그래밍하는 경우 자체 조정 타이머 (본질적으로 생성 된 지연을 위해 지속적으로 조정하는 타임 아웃 기반 타이머입니다)

Answer 2

차이가 있습니까?

예. 시간 초과는 settimeout () 호출 된 후 일정 시간을 실행합니다. 간격은 이전 간격이 발사 된 후 일정 시간을 실행합니다.

dostuff () 함수가 실행하는 데 시간이 걸리면 차이를 알 수 있습니다. 예를 들어, Settimeout/SetInterval에 대한 호출을 ., 시간 초과/간격의 발사 * 및 JavaScript 코드 실행 [-----], 타임 라인은 다음과 같습니다.

Timeout:

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

Interval:

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

다음 합병증은 JavaScript가 이미 무언가를하는 동안 (예 : 이전 간격을 처리하는 것과 같은) 간격 화재가 발생하는 경우입니다. 이 경우, 간격이 기억되고, 이전 핸들러가 완료되고 브라우저로 컨트롤을 반환하자마자 발생합니다. 예를 들어, 때때로 짧고 때로는 길고 길이 ([-----]) 인 dostuff () 프로세스의 경우 :

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

• 코드를 바로 실행할 수없는 간격 발사를 나타냅니다.

따라서 간격은 일정에 따라 '잡기'를 시도합니다. 그러나 그들은 서로를 대기하지 않습니다. 간격 당 하나의 실행이있을 수 있습니다. (모두 대기중인 경우 브라우저에는 끊임없이 뛰어난 실행 목록이 남아있을 것입니다!)

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

X는 실행할 수 없거나 보류 할 수없는 간격 발사를 나타냅니다. 대신 폐기되었습니다.

Dostuff () 기능이 설정된 간격보다 습관적으로 실행하는 데 시간이 더 걸리면 브라우저는 100% CPU를 사용하여 서비스를 제공하고 덜 반응이 될 수 있습니다.

당신은 무엇을 사용하고 그 이유는 무엇입니까?

체인 타임 아웃은 브라우저에 자유 시간을 보장합니다. Interval은 브라우저 UI 가용성을 희생하여 실행중인 기능이 예정된 시간에 최대한 가깝게 실행되도록하려고합니다.

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

브라우저 호환성 측면에서 Settimeout은 SetInterval을 사전하지만 오늘날 충족 할 모든 브라우저는 두 가지를 모두 지원합니다. 수년간 마지막 Straggler는 Winmo <6.5의 IE Mobile 이었지만 지금도 우리 뒤에 있기를 바랍니다.

Answer 3

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(). 지정된 간격에 도달 할 때만 한 번만 실행하기 때문입니다.

Answer 4

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

Answer 5

나는 그것을 찾았다 setTimeout 시간 초과를 취소하려면 사용하기 쉬운 방법 :

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

myTimeoutFunction();

또한 함수에서 무언가 잘못되면 초마다 오류를 반복하는 대신 처음 오류로 반복되는 것이 멈 춥니 다.

Answer 6

바로 그 차이는 그들의 목적에 있습니다.

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

Answer 7

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

- 예, dostuff () 1500 초 실행하고 당신은 다음과 같습니다. SetInterval (Dostuff, 1000);
1) 브라우저 실행 dostuff () 1.5 초가 걸립니다. 실행되기 위해;
2) ~ 1 초 후에는 실행을 시도합니다. dostuff () 다시. 그러나 이전 dostuff () 브라우저는 여전히 실행됩니다-> 따라서 브라우저는이 실행을 큐에 추가합니다 (처음으로 실행되기 위해).
3,4, ..) 다음 반복을 위해 실행 대기열에 동일하지만, 그러나 dostuff () 이전에서 아직 진행 중입니다 ...
결과적으로 브라우저가 붙어 있습니다.

이 행동을 방지하기 위해 가장 좋은 방법은 실행하는 것입니다. settimeout 내부의 settimeout setinterval을 모방합니다.
Settimeout 통화간에 시간 초과를 수정하려면 사용할 수 있습니다. JavaScript의 SetInterval에 대한 자체 조정 대안 기술.

Answer 8

Settimeout을 사용합니다.

분명히 차이는 settimeout이 메소드를 한 번 호출하는 것입니다. SetInterval은 반복적으로 호출됩니다.

다음은 차이점을 설명하는 좋은 기사입니다. 튜토리얼 : Settimeout 및 SetInterval이있는 JavaScript 타이머

Answer 9

나는 간단한 시험을했다 setInterval(func, milisec), 기능 시간 소비가 간격 지속 시간보다 클 때 어떤 일이 일어나는지 궁금했기 때문입니다.

setInterval ~ 할 것이다 일반적으로 바로 다음 반복을 예약하십시오 시작 이전 반복의 기능이 여전히 진행되지 않는 한. 그렇다면, setInterval 함수가 끝날 때까지 기다립니다. 발생하자마자 기능이 즉시 다시 시작됩니다. 일정에 따라 다음 반복을 기다리지 않습니다 (시간 초과 기능이없는 조건하에 있기 때문에). 병렬 반복이 실행되는 상황도 없습니다.

Chrome V23에서 이것을 테스트했습니다. 모든 현대식 브라우저에서 결정 론적 구현이되기를 바랍니다.

window.setInterval(function(start) {
    console.log('fired: ' + (new Date().getTime() - start));
    wait();
  }, 1000, new Date().getTime());

콘솔 출력 :

fired: 1000    + ~2500 ajax call -.
fired: 3522    <------------------'
fired: 6032
fired: 8540
fired: 11048

그만큼 wait 기능은 단지 스레드 차단 도우미입니다. 2500 밀리 초 서버 측에서 처리 :

function wait() {
    $.ajax({
        url: "...",
        async: false
    });
}

Answer 10

코드마다 실행 intevals가 있으며 온라인 게임과 같은 일부 프로젝트에서는 허용되지 않습니다. 먼저, 코드가 동일한 Intevals에서 코드를 작동 시키려면 "MyTimeOutFunction"을 변경해야합니다.

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

이 변경 후에는 동일합니다

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

그러나 JS는 단일 스레드이기 때문에 여전히 안정적인 결과를 얻지 못할 것입니다. 현재 JS 스레드가 무언가로 바쁘면 콜백 기능을 실행할 수 없으며 2-3msec에 대해 실행이 연기됩니다. 초당 60 개의 실행이 있고, 임의의 1-3 초 지연이있을 때마다 절대 허용되지 않습니다 (1 분 후에 약 7200msec 지연이 될 것입니다). 다음과 같은 것을 사용하도록 조언 할 수 있습니다.

    function Timer(clb, timeout) {
        this.clb = clb;
        this.timeout = timeout;
        this.stopTimeout = null;
        this.precision = -1;
    }

    Timer.prototype.start = function() {
        var me = this;
        var now = new Date();
        if(me.precision === -1) {
            me.precision = now.getTime();
        }
        me.stopTimeout = setTimeout(function(){
            me.start()
        }, me.precision - now.getTime() + me.timeout);
        me.precision += me.timeout;
        me.clb();
    };

    Timer.prototype.stop = function() {
        clearTimeout(this.stopTimeout);
        this.precision = -1;
    };

    function myTimeoutFunction()
    {
        doStuff();
    }

    var timer = new Timer(myTimeoutFunction, 1000);
    timer.start();

이 코드는 안정적인 실행 기간을 보장합니다. 스레드조차도 바쁠 것이며, 1005mseconds 후에 코드가 실행되며 다음 번에는 995msec의 시간 초과가 있으며 결과가 안정적입니다.

Answer 11

약간 다르게 살펴 보려면 : SetInterval은 주어진 간격 (즉, 1000ms 또는 지정한 양)에서 코드가 실행되도록 보장합니다. Settimeout은 코드를 실행할 때까지 기다리는 시간을 설정합니다. 또한 코드를 실행하는 데 추가 밀리 초가 걸리므로 최대 1000ms를 추가하므로 설정 타임 아웃은 부정확 한 시간 (1000ms 이상)에 다시 실행됩니다.

예를 들어, 타이머/카운트 다운은 Settimeout으로 수행되지 않으며 SetInterval로 수행되어 지연되지 않고 정확한 간격으로 코드가 실행되도록합니다.

Answer 12

SetInterVal 및 Settimeout은 모두 실행을 취소하는 데 사용할 수있는 타이머 ID를 반환합니다. 즉, 타임 아웃이 트리거되기 전에. 취소하려면 ClearInterval 또는 Cleartimeout을 다음과 같이 호출합니다.

var timeoutId = setTimeout(someFunction, 1000);
clearTimeout(timeoutId);
var intervalId = setInterval(someFunction, 1000),
clearInterval(intervalId);

또한 페이지를 떠나거나 브라우저 창을 닫을 때 타임 아웃이 자동으로 취소됩니다.

Answer 13

글쎄, 내가 방금 배운 것처럼 한 가지 상황에서 설정 타임 아웃이 더 좋습니다. 나는 항상 SetInterval을 사용합니다. 반 시간 이상 백그라운드에서 실행해야합니다. 해당 탭으로 다시 전환하면 슬라이드 쇼 (코드가 사용 된)가 5 초마다 매우 빠르게 변경되었습니다. 실제로 더 많이 테스트 할 때 다시 발생하며 브라우저의 결함인지 아닌지 여부는 중요하지 않습니다. Settimeout을 사용하면 상황이 완전히 불가능하기 때문입니다.

Answer 14

다음 JavaScript를 실행할 때 Bobince 답변을 직접 확인하거나 확인할 수 있습니다. jsfiddle

<div id="timeout"></div>
<div id="interval"></div>

var timeout = 0;
var interval = 0;

function doTimeout(){
    $('#timeout').html(timeout);
    timeout++;
    setTimeout(doTimeout, 1);
}

function doInterval(){
    $('#interval').html(interval);
    interval++;
}

$(function(){
    doTimeout();
    doInterval();
    setInterval(doInterval, 1);
});

Answer 15

차이점은 콘솔에서 분명합니다.

Answer 16

이미 말한 내용에 추가하면 코드의 설정 타임 아웃 버전도 Maximum call stack size 기능을 막을 수 있습니다. 재귀 기능이 중지 될 기본 케이스가 없으므로 실행할 수 없습니다. 영원히.

Answer 17

제 생각에는 SetInterval 그리고 SetTimeout 다르다. SetInterval 시간 설정에 따라 블록을 실행합니다. SetTimeout 코드 블록을 한 번 실행합니다.

타임 아웃 카운트 다운 초 후에이 코드 세트를 사용해보십시오.

setInterval(function(e){
    alert('Ugbana Kelvin');
}, 2000);

그리고 시도하십시오

setTimeout(function(e){
    alert('Ugbana Kelvin');
}, 2000);

자신의 차이점을 볼 수 있습니다.