setInterval計時器不准的問題解決方法_javascript技巧

在js中如果打算使用setInterval進行倒數,計時等功能,往往是不準確的,因為setInterval的回調函數並不是到時後立即執行,而是等系統計算資源空閒下來後才會執行.而下一次觸發時間則是在setInterval回呼函數執行完畢之後才開始計時,所以如果setInterval內執行的計算過於耗時,或者有其他耗時任務在執行,setInterval的計時會越來越不準,延遲很厲害.

下面的程式碼可以說明這個問題

複製程式碼 程式碼如下:

程式碼如下:


var🎜>var startTime = new Date().getTime();
var count = 0;
//耗時任務
setInterval(function(){
var i = 0;
while(i }, 0);
setInterval(function(){

count ;
console.log(new Date().getTime() - (startTime count * 1000));
}, 1000);

程式碼裡輸出了setInterval觸發時間與應該正確觸發時間的延遲毫秒數

複製程式碼

程式碼如下:


176
340
495
652
807
495
652
807
495
652
807
9611818🎜>
1425
1579
1734
1888
2048

2201
2357
2521
...

可以看到延遲是越來越嚴重的. 為了在js裡可以使用相對準確的計時功能,我們可以

複製程式碼


程式碼如下:


var startTime = new Date().getTime();
var count = 0 ;
setInterval(function(){
var i = 0;
while(i }, 0);
function fixed() {
},
count ; 🎜>var offset = new Date().getTime() - (startTime count * 1000);
var nextTime = 1000 - offset;
if (nextTime setTimeout(fixed , nextTime);

console.log(new Date().getTime() - (startTime count * 1000));
}
setTimeout(fixed, 1000);

setTimeout(fixed, 1000); 程式碼裡,透過1000(也就是周期時間)減去當前時間和準確時間的差距,來算出下次觸發的時間,從而修正了當前觸發的延遲. 下面是輸出

複製程式碼


程式碼如下:


186
2000158
899
900
899
900
899
899
899
999
899
899
902
232
266
145
174
192
214
242

268
149 242 268 149 242 268 149 1791 .. 可以看到雖然觸發時間並非絕對準確,但由於每次觸發都進行及時修正,所以並沒有造成誤差積累.