摘要:看一下例子一些其他的代碼假定處理程序需要執(zhí)行,這時雖然在添加了定時器代碼,但是仍舊需要等待事件完成后才能夠執(zhí)行。缺點某些間隔會被跳過多個定時器的代碼執(zhí)行之間的間隔可能會比預(yù)期小。
一. setTimeout 1. 定義
window.setTimeout(func,[delay,param1,param2,····]); window.setTimeout(code,[delay]);
參數(shù)說明:
a. 對于第一行代碼:
func指的是延遲后想執(zhí)行的函數(shù),delay為延遲秒數(shù),為毫秒,最大為32位有符號整數(shù)值,超過最大值即2147483647,將導(dǎo)致函數(shù)被立即執(zhí)行。
param是func的參數(shù),但是這種賦予參數(shù)的方法在IE9以下(含IE9)不兼容,可以使用polyfill或者外層包裹進行兼容性處理,有興趣可以點擊這里。
b. 對于第二行代碼:
code指的是可執(zhí)行代碼,例如
setTimeout(alert("HeiHei"),200)
但是這種方法不推薦,類似eval(),可以包含可執(zhí)行代碼,含有安全隱患。
2. 事件添加的說明定時器對隊列的工作方式:當(dāng)特定時間過去后將代碼添加到隊列中,但并不意味著會馬上將執(zhí)行,設(shè)定一個200ms后執(zhí)行的定時器,指的是在200ms后它將被添加到隊列中,是否執(zhí)行,還得看隊列中是否沒有其他的東西。看一下例子:
var a=document.getElementById("nav"); a.onclick=function(){ setTimeout(alertsomething,200); //一些其他的代碼 } function alertsomething(){ alert("it is working"); }
假定onclick處理程序需要執(zhí)行300ms,這時雖然在205ms添加了定時器代碼,但是仍舊需要等待onclick事件完成后才能夠執(zhí)行。如圖所示,本來在205ms處添加了定時器代碼,但是由于此時onclick事件還沒結(jié)束,故要等到300ms后才執(zhí)行定時器代碼
window.clearTimeout(timeoutID);4. 對于this的影響
setTimeout調(diào)用的代碼,運行在與所在函數(shù)完全分離的執(zhí)行環(huán)境上,在非嚴格模式中,this默認指向global或window,嚴格模式中會拋出undefined,通過call的方式目前也無法改變,官方的示例如下:
myArray = ["zero", "one", "two"]; myArray.myMethod = function (sProperty) { alert(arguments.length > 0 ? this[sProperty] : this); }; setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object" setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
對此我們可以使用外加一個匿名函數(shù)解決。
setTimeout(function(){myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds setTimeout(function(){myArray.myMethod("1")}, 2500); // prints "one" after 2.5 seconds
其他解決方案可以參照一下參考資料。
5. 事件延遲時間大于設(shè)定值a.上文圖中所示,隊列中還有事件未執(zhí)行完成,需要等待
b.chrome和firefox在未激活的標(biāo)簽中,會減緩setTimeout和setInterval的執(zhí)行,具體原因可以參考下文的資料
c.由于瀏覽器精度的原因,delay的值最終大于等于4。
下面是w3c中的原文:
If the currently running task is a task that was created by the setTimeout() method, and timeout is less than 4, then increase timeout to 4.
舉個例子:
setTimeout(function() { alert(2); }, 0); alert(1); //先顯示1,接著才顯示2二、setInterval 1.定義
跟setTimeout類似
window.setInterval(func, delay[,param1, param2, ...]); window.setInterval(code, delay);
為了避免多個定時器代碼不間斷連續(xù)運行好幾次,當(dāng)使用setInterval(),僅當(dāng)沒有該定時器的任何其他代碼實例時,才將定時器代碼添加到隊列中,通俗點就是等到上個定時器完成,再添加一個。
2.缺點某些間隔會被跳過
多個定時器的代碼執(zhí)行之間的間隔可能會比預(yù)期小。
在5處,創(chuàng)建一個定時器
205處,添加一個定時器,但是onclick代碼沒執(zhí)行完成,等待
300處,onclick代碼執(zhí)行完畢,執(zhí)行第一個定時器
405處,添加第二個定時器,但前一個定時器沒有執(zhí)行完成,等待
605處,本來是要添加第三個定時器,但是此時發(fā)現(xiàn),隊列中有了一個定時器,被跳過
等到第一個定時器代碼執(zhí)行完畢,馬上執(zhí)行第二個定時器,所以間隔會比預(yù)期的小。
鏈式調(diào)用,如下圖所示,主要用于重復(fù)定時器
setTimeout(function(){ //處理代碼 setTimeout(arguments.callee,interval) },intercal);
遞歸調(diào)用自己。
4. 清除事件window.clearInterval(intervalID)三、兩者之間的區(qū)別
setTimeout方法,在一個指定的時間間隔后運行代碼。
setInterval方法, 每隔一個固定的時間間隔后持續(xù)運行指定代碼。
MDN WindowTimers.setTimeout()
W3C Times
Chrome and Firefox throttle setTimeout/setInterval in inactive tabs
《JavaScript高級程序設(shè)計》Nicholas C.Zakas著 李松峰 曹力譯
你真的了解setTimeout和setInterval嗎
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/90828.html
摘要:注意如果主邏輯的代碼執(zhí)行時間已經(jīng)超過了第二個參數(shù)設(shè)置的時間,那么等運行到該回調(diào)函數(shù)時,它會忽略掉這個時間,并立即執(zhí)行。如果某一個進行大量的計算,那么它就會阻塞在當(dāng)前的回調(diào)函數(shù)中,等待該計算完成后,再執(zhí)行下一個的回調(diào)函數(shù)。 setTimeout() ? JavaScript是一個單線程的語言,也就是說它同一時間只能執(zhí)行一段代碼,接下來我們通過兩個例子說明一下單線程語言和多線程語言的...
摘要:工作線程執(zhí)行異步任務(wù),執(zhí)行完成后把對應(yīng)額回調(diào)函數(shù)封裝成一條消息放到消息隊列中主線程不斷地從消息隊列中取消息并執(zhí)行。當(dāng)消息隊列為空時,主線程阻塞,直到消息隊列再次非空。取決于何時被主線程的事件循環(huán)取到,并執(zhí)行。 轉(zhuǎn)自:http://palmer.arkstack.cn/201...一:平時簡單使用 1.setTimeout延遲一段時間執(zhí)行一次(only one) setTimeout(f...
摘要:定時器方法相關(guān)方法有四種。返回值返回值是一個正整數(shù),表示定時器的編號。這個值可以傳遞給來取消該定時器。使用方法很簡單只有一個參數(shù),該參數(shù)為您要取消定時器的標(biāo)識符。用法很簡單當(dāng)代碼運行到這行的時候,會取消所設(shè)置的定時器。 簡單介紹在JavaScript中定時器有兩個 setInterval() 與 setTime...
摘要:提出標(biāo)準,允許腳本創(chuàng)建多個線程,但是子線程完全受主線程控制,且不得操作。所以,這個新標(biāo)準并沒有改變單線程的本質(zhì)。事件循環(huán)主線程線程只會做一件事,就是從消息隊列里面取消息執(zhí)行消息,再取消息再執(zhí)行。工作線程是生產(chǎn)者,主線程是消費者。 最近項目中遇到了一個場景,其實很常見,就是定時獲取接口刷新數(shù)據(jù)。那么問題來了,假設(shè)我設(shè)置的定時時間為1s,而數(shù)據(jù)接口返回大于1s,應(yīng)該用同步阻塞還是異步?我們...
閱讀 1552·2021-11-17 09:33
閱讀 1100·2021-11-12 10:36
閱讀 2414·2019-08-30 15:54
閱讀 2441·2019-08-30 13:14
閱讀 2914·2019-08-26 14:05
閱讀 3289·2019-08-26 11:32
閱讀 3001·2019-08-26 10:09
閱讀 2995·2019-08-26 10:09