setInterval을 사용하지 말아야 하는 이유에 대해 이야기해 보겠습니다.

setInterval을 사용하지 않는 이유는 무엇입니까? 다음 기사에서는 setInterval을 사용하지 말아야 하는 이유에 대해 간략하게 설명합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

온라인 채팅 도구를 개발할 때 특정 밀리초 후에 작업을 반복적으로 수행해야 하는 경우가 종종 있습니다. "문제 없습니다. 그냥 setInterval을 사용하세요. 제 생각에는 이 아이디어가 끔찍합니다."

한 가지 이유: setInterval은 코드 오류를 무시합니다

setInterval에는 호출하는 코드가 오류를 보고하는지 여부에 무관심하는 성가신 습관이 있습니다. 즉, setInterval에 의해 실행된 코드가 어떤 이유로든 잘못되면 이에 관계없이 해당 코드를 계속 호출하게 됩니다. 코드를 보세요

function a() {
    try{
        a.error.here;
    } catch(e){
        $(&#39;body&#39;).append(&#39;<div>&#39; + e.toString() + &#39;</div>&#39;);
        throw e;
    }
}
function b() {
    try{
        b.error.here;
    } catch(e)
    {
        $(&#39;body&#39;).append(&#39;<div>&#39; + e.toString() + &#39;</div>&#39;);
        throw e;
    }
    setTimeout(b, 2000);
}
setInterval(a, 2000);
setTimeout(b, 2000);

두 번째 이유: setInterval은 네트워크 지연을 무시합니다

새로운 데이터가 있는지 확인하기 위해 가끔씩 Ajax를 통해 서버를 폴링한다고 가정합니다. (참고: 실제로 이렇게 하면 죄송하지만 "백오프 폴링"을 사용하는 것이 좋습니다. [1]) 그리고 몇 가지 이유(서버 과부하, 일시적인 네트워크 중단, 갑작스러운 트래픽 증가, 제한된 사용자 대역폭 등)로 인해 귀하의 요청이 생각보다 훨씬 오래 걸릴 것입니다. 그러나 setInterval은 상관하지 않습니다. 여전히 정기적으로 요청을 실행하고 결국 클라이언트 네트워크 대기열이 Ajax 호출로 채워지게 됩니다. 코드를 보세요

var n = 0,
    t = 0,
    u = 0,
    i, s = 'Stopping after 25 requests, to avoid killing jsfiddle’s server';
function a() {
    $.post('/ajax_html_echo/', function () {
        --n;
    });
    ++n;
    ++t;
    $('#reqs').html(n + ' a() requests in progress!');
    if (t > 25) {
        clearInterval(i);
        $('#reqs').html(s);
    }
}
function b() {
    ++u;
    $.post('/ajax_html_echo/', function () {
        $('#req2').html('b(): ' + new Date().toString());
        if (u <= 25) {
            setTimeout(b, 500);
        } else {
            $(&#39;#req2&#39;).html(s);
        }
    });
}
i = setInterval(a, 500);
setTimeout(b, 500);

세 번째 이유: setInterval은 실행이 보장되지 않습니다

setTimeout과 달리 시간 간격에 도달하면 코드가 실행된다는 것을 보장할 수 없습니다. 호출한 함수를 완료하는 데 오랜 시간이 걸리면 일부 호출은 단순히 무시됩니다. 코드를 보면

function slow() {
    $.ajax({
        url: '/echo/html/',
        async: false,
        data: {
            delay: 1
        },
        complete: function () {
        }
    });
    $('#reqs').text(~~((new Date() - start) / 100) + ' expected, ' + iters + ' actual');
    if (iters++ > 4) {
        $(&#39;#reqs&#39;).append(&#39;<br>Stopping after 5 iterations&#39;);
        clearInterval(iv);
    }
};
var iv = setInterval(slow, 100), start = +new Date(), iters = 0;

해결 방법은 간단합니다. setTimeout

을 사용하는 것입니다. setInterval을 사용하는 대신 적절한 순간에 setTimeout을 통해 함수 자체를 호출하는 것이 좋습니다. 이전 두 예제에서는 setInterval 오류를 사용하는 함수 a와 setTimeout을 사용하는 함수 b가 잘 수행됩니다.

간격이 동일해야 한다면 어떻게 될까요?

이벤트가 "균등하게" 트리거되도록 하려면 원하는 지연에서 마지막 호출에 소요된 시간을 뺀 다음 결과 차이를 setTimeout에 지연으로 동적으로 할당할 수 있습니다. 그러나 JavaScript 타이머는 그다지 정확하지 않습니다[2]. 따라서 여러 가지 이유로(가비지 수집, JavaScript의 단일 스레드 등) setInterval을 사용하더라도 절대적으로 "평균" 대기 시간을 얻을 수 없습니다. 또한 현재 브라우저에서는 최소 시간 초과 기간을 4ms에서 15ms 사이로 수정합니다. 그러니 전혀 오류가 없을 것이라고 기대하지 마십시오.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 setInterval을 사용하지 말아야 하는 이유에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!