표류를 방지하는 정확한 JavaScript 타이머를 어떻게 만들 수 있습니까?

정확한 JavaScript 타이머 만들기

타이머는 작업 예약 및 실시간 기능 구현을 위해 JavaScript에서 중요한 역할을 합니다. 그러나 JavaScript 실행의 비동기적 특성으로 인해 타이머의 정확성을 보장하는 것이 어려울 수 있습니다.

setInterval/setTimeout의 부정확성

제공하신 코드 조각은 setInterval 함수를 활용하여 매 시간마다 카운터를 증가시킵니다. 두번째. 그러나 3600초 후에 카운터가 약 3500초에만 도달한 것을 관찰했습니다. 이는 setInterval 및 setTimeout이 본질적으로 정확하지 않기 때문입니다. 시간이 지남에 따라 지연되거나 표류하는 경향이 있습니다.

날짜 개체를 사용한 정확한 타이밍

정확한 타이머를 생성하려면 대신 날짜 개체를 사용하는 것이 좋습니다. Date 객체를 사용하면 밀리초 단위의 정밀도로 현재 시간을 얻을 수 있습니다. 다음과 같이 현재 시간과 시작 시간의 차이를 기반으로 타이머 논리를 설정할 수 있습니다.

var start = Date.now();
setInterval(function() {
    var delta = Date.now() - start; // milliseconds elapsed since start
    ...
    output(Math.floor(delta / 1000)); // in seconds
}, 1000); // update about every second

자체 조정 타이머

드리프트 없이 일정한 간격이 필요한 타이머 애플리케이션의 경우 , 자체 조정 타이머가 더 나은 옵션입니다. 실제 경과 시간을 기준으로 시간 초과 간의 지연을 동적으로 조정합니다. 이 접근 방식을 사용하면 타이머가 제대로 작동하도록 보장됩니다.

var interval = 1000; // ms
var expected = Date.now() + interval;
setTimeout(step, interval);
function step() {
    var dt = Date.now() - expected; // the drift (positive for overshooting)
    ... // do what is to be done
    expected += interval;
    setTimeout(step, Math.max(0, interval - dt)); // take into account drift
}

위 내용은 표류를 방지하는 정확한 JavaScript 타이머를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!