setInterval計時器不準的問題解決方法

更新時間：2014年05月08日 15:45:32 作者：

在js中如果打算使用setInterval進行倒數,計時等功能，往往是不準確的，針對這個問題，本文有個不錯的解決方案

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

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

復制代碼代碼如下:

 
var startTime = new Date().getTime(); 
var count = 0; 
//耗時任務 
setInterval(function(){ 
var i = 0; 
while(i++ < 100000000); 
}, 0); 
setInterval(function(){ 
count++; 
console.log(new Date().getTime() - (startTime + count * 1000)); 
}, 1000); 

代碼里輸出了setInterval觸發(fā)時間和應該正確觸發(fā)時間的延遲毫秒數

復制代碼代碼如下:

 



















...... 

可以看到延遲是越來越嚴重的.

為了在js里可以使用相對準確的計時功能,我們可以

復制代碼代碼如下:

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

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

代碼里,通過1000(也就是周期時間)減去當前時間和準確時間的差距,來算出下次觸發(fā)的時間,從而修正了當前觸發(fā)的延遲.

下面是輸出

復制代碼代碼如下:

可以看到雖然觸發(fā)時間并非絕對準確,但由于每次觸發(fā)都進行及時修正,所以并沒有造成誤差積累.

您可能感興趣的文章:

setInterval 不準的原因及問題解決方案

javascript轉換日期字符串為Date日期對象的方法
這篇文章主要介紹了javascript轉換日期字符串為Date日期對象的方法,是非常實用的轉換技巧,需要的朋友可以參考下
2015-02-02
js實現(xiàn)按鈕開關單機下拉菜單效果
這篇文章主要介紹了js實現(xiàn)按鈕開關單機下拉菜單效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-11-11
js獲取圖片長和寬度的代碼
js獲取圖片長和寬的代碼，大家可以參考下。
2009-11-11
基于el-slider實現(xiàn)一個能拖動的時間范圍選擇器
這篇文章主要介紹了基于el-slider實現(xiàn)一個能拖動的時間范圍選擇器,并通過實例代碼介紹了基于element-ui el-slider實現(xiàn)滑動限位器的方法,需要的朋友可以參考下
2024-02-02
onclick與listeners的執(zhí)行先后問題詳細解剖
javascript中onclick與listeners的執(zhí)行先后問題一直都是大家所疑惑的地方，接下來將為大家解決此疑惑，感興趣的朋友可以了解下哦
2013-01-01
uniapp小程序點擊輸入框時阻止彈出軟鍵盤的幾種解決方案
在寫項目時候需要在表單里面加一個picker選擇器,但選擇input的時候軟鍵盤與選擇器會同時彈出,下面這篇文章主要給大家介紹了關于uniapp小程序點擊輸入框時阻止彈出軟鍵盤的幾種解決方案,需要的朋友可以參考下
2024-02-02
原生js canvas實現(xiàn)鼠標跟隨效果
這篇文章主要為大家詳細介紹了原生js canvas實現(xiàn)鼠標跟隨效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
JavaScript解析json格式數據簡單示例
這篇文章主要介紹了JavaScript解析json格式數據簡單示例,本文通過for循環(huán)來獲取json結點數據,需要的朋友可以參考下
2014-12-12
利用JS獲取IE客戶端IP及MAC的實現(xiàn)好象不可以
利用JS獲取IE客戶端IP及MAC的實現(xiàn)好象不可以...
2007-01-01
js數字轉中文兩種實現(xiàn)方法
在前端開發(fā)中有時候會需要到將阿拉伯數字轉化為中文,當前做個記錄,提供自己之后翻閱,這篇文章主要給大家介紹了關于js數字轉中文兩種實現(xiàn)方法的相關資料,需要的朋友可以參考下
2023-10-10