setInterval計(jì)時(shí)器不準(zhǔn)的問(wèn)題解決方法

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

在js中如果打算使用setInterval進(jìn)行倒數(shù),計(jì)時(shí)等功能，往往是不準(zhǔn)確的，針對(duì)這個(gè)問(wèn)題，本文有個(gè)不錯(cuò)的解決方案

在js中如果打算使用setInterval進(jìn)行倒數(shù),計(jì)時(shí)等功能,往往是不準(zhǔn)確的,因?yàn)閟etInterval的回調(diào)函數(shù)并不是到時(shí)后立即執(zhí)行,而是等系統(tǒng)計(jì)算資源空閑下來(lái)后才會(huì)執(zhí)行.而下一次觸發(fā)時(shí)間則是在setInterval回調(diào)函數(shù)執(zhí)行完畢之后才開(kāi)始計(jì)時(shí),所以如果setInterval內(nèi)執(zhí)行的計(jì)算過(guò)于耗時(shí),或者有其他耗時(shí)任務(wù)在執(zhí)行,setInterval的計(jì)時(shí)會(huì)越來(lái)越不準(zhǔn),延遲很厲害.

下面的代碼可以說(shuō)明這個(gè)問(wèn)題

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

 



















...... 

可以看到延遲是越來(lái)越嚴(yán)重的.

為了在js里可以使用相對(duì)準(zhǔn)確的計(jì)時(shí)功能,我們可以

復(fù)制代碼代碼如下:

 
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); 

代碼里,通過(guò)1000(也就是周期時(shí)間)減去當(dāng)前時(shí)間和準(zhǔn)確時(shí)間的差距,來(lái)算出下次觸發(fā)的時(shí)間,從而修正了當(dāng)前觸發(fā)的延遲.

下面是輸出

復(fù)制代碼代碼如下:

可以看到雖然觸發(fā)時(shí)間并非絕對(duì)準(zhǔn)確,但由于每次觸發(fā)都進(jìn)行及時(shí)修正,所以并沒(méi)有造成誤差積累.

您可能感興趣的文章:

setInterval 不準(zhǔn)的原因及問(wèn)題解決方案

相關(guān)文章

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