Javascript setTimeout은 100 밀리 초 미만의 간격을 허용하지 않습니다.

Question

10 밀리 초마다 재귀 함수를 실행하고 싶지만, setTimeout은 내가 무엇을 입력했는지에 관계없이 100 미만의 값을 취하지 않습니다.

decrementCountdown = function() { 
    console.log('fired'); 
    t = setTimeout("decrementCountdown()", 100); 
} 

1000 밀리 초 미만의 값을 설정할 수없는 이유는 무엇입니까?

수정 : 내 타이머가 올바르게 실행되는 것처럼 보입니다 ... 문제는 Jquery의 html()과 같은 함수를 호출 할 때 사용됩니다. setTimeout이 올바른 간격으로 함수를 호출하더라도 100 밀리 초보다 빨리 시작하지는 않습니다.

누구나 내 페이지에서 10 밀리 초까지 카운트 다운 타이머를 만들 수 있습니다.

Answer 1

더 좋은 예는 다음과 같습니다

var stop = 0; 
decrementCountdown = function() { 
    console.log(new Date().getTime()); 
    stop++; 
    if (stop<10) t = setTimeout("decrementCountdown()", 100); 
} 

decrementCountdown(); 

당신이 볼 수로서

는, 제한 시간은 약 100ms마다 ( jsFiddle를) 시작됩니다.

Answer 2

page you can run은 시스템의 브라우저에서 setTimeout()의 유사 콘텐츠가 무엇인지 정확하게 알려줍니다. 10,000 회 setTimeout(fn, 1) 번의 작업을 실행하고 호출과 출력 사이의 평균, 최대 및 최소 대기 시간을 화면에 기록합니다.

setTimeout()은 최소한의 가치가 있습니다. 브라우저에 따라 조금씩 다르지만 일반적으로 10-20ms 범위입니다 (브라우저 크기는 작거나 클 수 있지만 브라우저에 달려 있습니다). 이를 "클램핑"이라고합니다. 그것의 목적은 자바 스크립트 실행을 너무 많이하지 않고 다른 이벤트 (예 : 다른 사용자 이벤트, 다시 그리기 등)를 수행 할 충분한 시간이 아닌 브라우저 이벤트 대기열을 보호하는 것입니다.

그러나 브라우저가 최소값보다 빨리 발동하지 않는다는 것을 의미하는 것은 항상 그 값을 신속하게 얻는다는 것을 의미하지는 않습니다. Javascript는 단일 스레드이므로 브라우저가 사용 중이면 더 이상 javascript가 실행되지 않고 다음 타이머 이벤트가 대기열의 앞에 오게 될 때까지 setTimeout()이 발생하지 않습니다.

또한 최신 브라우저의 경우 타이머가있는 페이지가 현재 탭이 아닌 경우 타이머가 느려집니다. 위의 페이지에서 실행 중일 때 다른 탭으로 전환하여 평균 시간이 더 오래 걸리는 것을 볼 수 있습니다.

var lastTime = new Date(); 
var cumDiff = 0; 
var minDelta = 1000000; 
var maxDelta = 0; 
var cnt = 0; 
var nowElem = document.getElementById("now"); 
var deltaElem = document.getElementById("delta"); 
var minDeltaElem = document.getElementById("minDelta"); 
var maxDeltaElem = document.getElementById("maxDelta"); 
function run() { 
    var now = new Date().getTime(); 
    var diff = now - lastTime; 
    cumDiff += diff; 
    minDelta = Math.min(diff, minDelta); 
    maxDelta = Math.max(diff, maxDelta); 
    cnt++; 
    var avgDelta = cumDiff/cnt; 
    lastTime = now; 
    nowElem.innerHTML = now; 
    deltaElem.innerHTML = avgDelta.toFixed(1); 
    minDeltaElem.innerHTML = minDelta; 
    maxDeltaElem.innerHTML = maxDelta; 
    if (cnt < 10000) { 
     setTimeout(run, 1); 
    } 
} 
setTimeout(run, 1); 

면책 조항 : 일부 이전 버전의 브라우저는 매우 정확 Date() 기능 (10-20ms 내에 만 정확) 그래서이 데이터 원이없는

궁금해하는 사람들을 위해

, 여기에 해당 페이지의 코드는 오래된 브라우저 중 하나에서 매우 정확합니다.

Answer 3

나는 당신의 예를 시험해 보았고 잘 작동하는 것처럼 보였다. 그것이 내가 사용의 setTimeout의 지속적인 재 선언에 저장 줄 가치가 무엇인지에 대한

function decrementCountdown() 
{ 
    /*Do your thing*/ 
} 
setInterval(decrementCountdown, 100);