為什么盡量別用setInterval？下面本篇文章就來淺談一下盡量別用setInterval的原因。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

在開發(fā)一個在線聊天工具時，經(jīng)常會有過多少毫秒就重復(fù)執(zhí)行一次某操作的需求?！皼]問題”，大家都說，“用setInterval好了。”我覺得這個點子很糟糕。

原因之一：setInterval無視代碼錯誤

setInterval有個討厭的習(xí)慣，即對自己調(diào)用的代碼是否報錯這件事漠不關(guān)心。換句話說，如果setInterval執(zhí)行的代碼由于某種原因出了錯，它還會持續(xù)不斷（不管不顧）地調(diào)用該代碼。看代碼

function a() {     try{         a.error.here;     } catch(e){         $('body').append('<div>' + e.toString() + '</div>');         throw e;     } } function b() {     try{         b.error.here;     } catch(e)     {         $('body').append('<div>' + e.toString() + '</div>');         throw e;     }     setTimeout(b, 2000); } setInterval(a, 2000); setTimeout(b, 2000);

原因之二：setInterval無視網(wǎng)絡(luò)延遲

假設(shè)你每隔一段時間就通過Ajax輪詢一次服務(wù)器，看看有沒有新數(shù)據(jù)（注意：如果你真的這么做了，那恐怕你做錯了；建議使用“補(bǔ)償性輪詢”（backoff polling）[1]）。而由于某些原因（服務(wù)器過載、臨時斷網(wǎng)、流量劇增、用戶帶寬受限，等等），你的請求要花的時間遠(yuǎn)比你想象的要長。但setInterval不在乎。它仍然會按定時持續(xù)不斷地觸發(fā)請求，最終你的客戶端網(wǎng)絡(luò)隊列會塞滿Ajax調(diào)用?？创a

var n = 0,     t = 0,     u = 0,     i, s = 'Stopping after 25 requests, to avoid killing jsfiddle’s server'; function a() {     $.post('/ajax_html_echo/', function () {         --n;     });     ++n;     ++t;     $('#reqs').html(n + ' a() requests in progress!');     if (t > 25) {         clearInterval(i);         $('#reqs').html(s);     } } function b() {     ++u;     $.post('/ajax_html_echo/', function () {         $('#req2').html('b(): ' + new Date().toString());         if (u <= 25) {             setTimeout(b, 500);         } else {             $('#req2').html(s);         }     }); } i = setInterval(a, 500); setTimeout(b, 500);

原因之三：setInterval不保證執(zhí)行

與setTimeout不同，你并不能保證到了時間間隔，代碼就準(zhǔn)能執(zhí)行。如果你調(diào)用的函數(shù)需要花很長時間才能完成，那某些調(diào)用會被直接忽略。看代碼

function slow() {     $.ajax({         url: '/echo/html/',         async: false,         data: {             delay: 1         },         complete: function () {         }     });     $('#reqs').text(~~((new Date() - start) / 100) + ' expected, ' + iters + ' actual');     if (iters++ > 4) {         $('#reqs').append('<br>Stopping after 5 iterations');         clearInterval(iv);     } }; var iv = setInterval(slow, 100), start = +new Date(), iters = 0;

解決之道很簡單：用setTimeout

與其使用setInterval，不如在適當(dāng)?shù)臅r刻通過setTimeout來調(diào)用函數(shù)自身。在前面兩個示例中，使用setInterval的函數(shù)a都出錯了，而使用setTimeout的函數(shù)b則表現(xiàn)很好。

如果必須保證間隔相等怎么辦？

如果確實要保證事件“勻速”被觸發(fā)，那可以用希望的延遲減去上次調(diào)用所花時間，然后將得到的差值作為延遲動態(tài)指定給setTimeout。 不過，要注意的是JavaScript的計時器并不是非常精確[2]。因此你不可能得到絕對“平均”的延遲，即使使用setInterval也不行，原因很多（比如垃圾回收、JavaScript是單線程的，等等）。此外，當(dāng)前瀏覽器也會將最小的超時時間固定在4ms到15ms之間。因此不要指望一點誤差也沒有。