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

    在js中如果打算使用setInterval進(jìn)行倒數(shù),計(jì)時等功能,往往是不準(zhǔn)確的,因?yàn)閟etInterval的回調(diào)函數(shù)并不是到時后立即執(zhí)行,而是等系統(tǒng)計(jì)算資源空閑下來后才會執(zhí)行.而下一次觸發(fā)時間則是在setInterval回調(diào)函數(shù)執(zhí)行完畢之后才開始計(jì)時,所以如果setInterval內(nèi)執(zhí)行的計(jì)算過于耗時,或者有其他耗時任務(wù)在執(zhí)行,setInterval的計(jì)時會越來越不準(zhǔn),延遲很厲害.
    下面的代碼可以說明這個問題
    代碼如下:
    var startTime = new Date().getTime();
    var count = 0;
    //耗時任務(wù)
    setInterval(function(){
    var i = 0;
    while(i++ < 100000000);
    }, 0);
    setInterval(function(){
    count++;
    console.log(new Date().getTime() - (startTime + count * 1000));
    }, 1000);
    代碼里輸出了setInterval觸發(fā)時間和應(yīng)該正確觸發(fā)時間的延遲毫秒數(shù)
    代碼如下:
    176
    340
    495
    652
    807
    961
    1114
    1268
    1425
    1579
    1734
    1888
    2048
    2201
    2357
    2521
    2679
    2834
    2996
    ......
    可以看到延遲是越來越嚴(yán)重的.
    為了在js里可以使用相對準(zhǔn)確的計(jì)時功能,我們可以
    代碼如下:
    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(也就是周期時間)減去當(dāng)前時間和準(zhǔn)確時間的差距,來算出下次觸發(fā)的時間,從而修正了當(dāng)前觸發(fā)的延遲.
    下面是輸出
    代碼如下:
    186
    200
    230
    271
    158
    899
    900
    899
    900
    899
    899
    899
    902
    899
    418
    202
    232
    266
    145
    174
    192
    214
    242
    268
    149
    179
    214
    ......
    可以看到雖然觸發(fā)時間并非絕對準(zhǔn)確,但由于每次觸發(fā)都進(jìn)行及時修正,所以并沒有造成誤差積累.