setTimeout和setInterval的區(qū)別你真的了解嗎?
先談?wù)剆etTimeout
function click() {
// code block1...
setTimeout(function() {
// process ...
}, 200);
// code block2
}
假設(shè)我們給一個(gè)button的onclick事件綁定了此方法, 當(dāng)我們按下按鈕后, 肯定先執(zhí)行block1的內(nèi)容, 然后運(yùn)行到setTimeout的地方, setTimeout會(huì)告訴瀏覽器說, "200ms后我會(huì)插一段要執(zhí)行的代碼給你的隊(duì)列中", 瀏覽器當(dāng)然答應(yīng)了(注意插入代碼并不意味著立馬執(zhí)行), setTimeout代碼運(yùn)行后, 緊跟其后的block2代碼開始執(zhí)行, 這里就開始說明問題了, 如果block2的代碼執(zhí)行時(shí)間超過200ms, 那結(jié)果會(huì)是如何? 或許按照你之前的理解, 會(huì)理所當(dāng)然的認(rèn)為200ms一到, 你的process代碼會(huì)立馬執(zhí)行...事實(shí)是, 在block2執(zhí)行過程中(執(zhí)行了200ms后)process代碼被插入代碼隊(duì)列, 但一直要等click方法執(zhí)行結(jié)束, 才會(huì)執(zhí)行process代碼段, 從代碼隊(duì)列上看process代碼是在click后面的, 再加上js以單線程方式執(zhí)行, 所以應(yīng)該不難理解. 如果是另一種情況, block2代碼執(zhí)行的時(shí)間<200ms, setTimeout在200ms后將process代碼插入到代碼隊(duì)列, 而那時(shí)執(zhí)行線程可能已經(jīng)處于空閑狀態(tài)了(idle), 那結(jié)果就是200ms后, process代碼插入隊(duì)列就立馬執(zhí)行了, 就讓你感覺200ms后, 就執(zhí)行了.
再看看setInterval
這里可能會(huì)存在兩個(gè)問題:
1.時(shí)間間隔或許會(huì)跳過
2.時(shí)間間隔可能<定時(shí)調(diào)用的代碼的執(zhí)行時(shí)間
function click() {
// code block1...
setInterval(function() {
// process ...
}, 200);
// code block2
}
和上面一樣我們假設(shè)通過一個(gè)click, 觸發(fā)了setInterval以實(shí)現(xiàn)每隔一個(gè)時(shí)間段執(zhí)行process代碼
比如onclick要300ms執(zhí)行完, block1代碼執(zhí)行完, 在5ms時(shí)執(zhí)行setInterval, 以此為一個(gè)時(shí)間點(diǎn), 在205ms時(shí)插入process代碼, click代碼順利結(jié)束, process代碼開始執(zhí)行(相當(dāng)于圖中的timer code), 然而process代碼也執(zhí)行了一個(gè)比較長的時(shí)間, 超過了接下來一個(gè)插入時(shí)間點(diǎn)405ms, 這樣代碼隊(duì)列后又插入了一份process代碼, process繼續(xù)執(zhí)行著, 而且超過了605ms這個(gè)插入時(shí)間點(diǎn), 下面問題來, 可能你還會(huì)認(rèn)為代碼隊(duì)列后面又會(huì)繼續(xù)插入一份process代碼...真實(shí)的情況是,由于代碼隊(duì)列中已經(jīng)有了一份未執(zhí)行的process代碼, 所以605ms這個(gè)插入時(shí)間點(diǎn)將會(huì)被"無情"的跳過, 因?yàn)閖s引擎只允許有一份未執(zhí)行的process代碼, 說到這里不知道您是不是會(huì)豁然開朗呢...
為了這種情況你可以用一種更好的代碼形式
setTimeout(function(){
//processing
setTimeout(arguments.callee, interval);
}, interval);
這個(gè)估計(jì)稍微想一下, 就明白其中的好處了, 這樣就不會(huì)產(chǎn)生時(shí)間點(diǎn)被跳過的問題內(nèi)容就到這里, 希望能有所幫助, 可能我表達(dá)的不是很清楚如果覺得自己英語基礎(chǔ)不錯(cuò)可以直接看
里有關(guān)advanced Timers這節(jié)內(nèi)容, 個(gè)人認(rèn)為這本書真的很不錯(cuò), 無論是想從零學(xué)起, 還是平日沒事翻翻參考參考 都很不錯(cuò), 作者是yahoo里很牛的一位前端開發(fā)工程師 : )
- javascript setTimeout和setInterval計(jì)時(shí)的區(qū)別詳解
- javascript setTimeout和setInterval 的區(qū)別
- setInterval()和setTimeout()的用法和區(qū)別示例介紹
- setTimeout()與setInterval()方法區(qū)別介紹
- setInterval和setTimeout停止的方法
- Js setInterval與setTimeout(定時(shí)執(zhí)行與循環(huán)執(zhí)行)的代碼(可以傳入?yún)?shù))
- JavaScript SetInterval與setTimeout使用方法詳解
- Js中setTimeout()和setInterval() 何時(shí)被調(diào)用執(zhí)行的用法
- JavaScript中SetInterval與setTimeout的用法詳解
- setTimeout與setInterval的區(qū)別淺析
相關(guān)文章
這篇文章主要介紹了JS中去掉array中重復(fù)元素的方法,需要的朋友可以參考下2017-05-05
本篇文章主要介紹了淺談PDF.js使用心得，pdf.js 是一個(gè)技術(shù)原型主要用于在 HTML5 平臺(tái)上展示 PDF 文檔，無需任何本地技術(shù)支持。非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-06-06
基于JavaScript實(shí)現(xiàn)帶數(shù)據(jù)驗(yàn)證和復(fù)選框的表單提交
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)帶數(shù)據(jù)驗(yàn)證和復(fù)選框的表單提交功能,需要的朋友可以參考下2017-08-08
JS字符串累加Array不一定比字符串累加快(根據(jù)電腦配置)
言歸正傳：性能差異較大的機(jī)器運(yùn)行結(jié)果會(huì)RT 出現(xiàn)大的差異,為了保險(xiǎn)起見。還是推薦使用Array 來進(jìn)行字符串拼接操作2012-05-05
這篇文章主要介紹了微信小程序修改checkbox的樣式代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
Js 獲取HTML DOM節(jié)點(diǎn)元素的方法小結(jié)
在Web應(yīng)用程序特別是Web2.0程序開發(fā)中，經(jīng)常要獲取頁面中某個(gè)元素，然后更新該元素的樣式、內(nèi)容等。2009-04-04
在學(xué)習(xí)JavaScript之前，必須具備HTML和CSS知識(shí)，Javascript是一種解釋性的，基于對(duì)象的腳本語言(aninterpreted,object-basedscriptinglanguage)。這篇文章主要講解JavaScript入門基礎(chǔ)，需要的朋友可以參考下2015-08-08
關(guān)于導(dǎo)入excel時(shí)js轉(zhuǎn)換時(shí)間的正確方式
這篇文章主要給大家介紹了關(guān)于導(dǎo)入excel時(shí)js轉(zhuǎn)換時(shí)間的正確方式,以及js讀取excel中日期格式轉(zhuǎn)換問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
這篇文章主要介紹了javascript高級(jí)定時(shí)器，針對(duì)javascript的代碼隊(duì)列進(jìn)行詳細(xì)解析，感興趣的小伙伴們可以參考一下2015-12-12
除了正常運(yùn)行模式，ECMAscript 5添加了第二種運(yùn)行模式："嚴(yán)格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴(yán)格的條件下運(yùn)行。這篇文章給大家詳細(xì)介紹了js判斷瀏覽器是否支持嚴(yán)格模式的方法，有需要的朋友們可以參考借鑒。2016-10-10