成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

setTimeout與setInterval(一)

Betta / 1805人閱讀

摘要：看一下例子一些其他的代碼假定處理程序需要執(zhí)行，這時(shí)雖然在添加了定時(shí)器代碼，但是仍舊需要等待事件完成后才能夠執(zhí)行。缺點(diǎn)某些間隔會(huì)被跳過(guò)多個(gè)定時(shí)器的代碼執(zhí)行之間的間隔可能會(huì)比預(yù)期小。

一. setTimeout 1. 定義 
window.setTimeout(func,[delay,param1,param2,····]);
window.setTimeout(code,[delay]);

參數(shù)說(shuō)明：
a. 對(duì)于第一行代碼：
func指的是延遲后想執(zhí)行的函數(shù)，delay為延遲秒數(shù)，為毫秒，最大為32位有符號(hào)整數(shù)值，超過(guò)最大值即2147483647，將導(dǎo)致函數(shù)被立即執(zhí)行。
param是func的參數(shù)，但是這種賦予參數(shù)的方法在IE9以下（含IE9）不兼容，可以使用polyfill或者外層包裹進(jìn)行兼容性處理,有興趣可以點(diǎn)擊這里。
b. 對(duì)于第二行代碼：
code指的是可執(zhí)行代碼，例如

setTimeout(alert("HeiHei"),200)

但是這種方法不推薦，類(lèi)似eval(),可以包含可執(zhí)行代碼，含有安全隱患。

2. 事件添加的說(shuō)明

定時(shí)器對(duì)隊(duì)列的工作方式：當(dāng)特定時(shí)間過(guò)去后將代碼添加到隊(duì)列中，但并不意味著會(huì)馬上將執(zhí)行，設(shè)定一個(gè)200ms后執(zhí)行的定時(shí)器，指的是在200ms后它將被添加到隊(duì)列中，是否執(zhí)行，還得看隊(duì)列中是否沒(méi)有其他的東西?？匆幌吕樱?/p> 

var a=document.getElementById("nav");
    a.onclick=function(){
    setTimeout(alertsomething,200);
    //一些其他的代碼
}
function alertsomething(){
    alert("it is working");
}

假定onclick處理程序需要執(zhí)行300ms，這時(shí)雖然在205ms添加了定時(shí)器代碼，但是仍舊需要等待onclick事件完成后才能夠執(zhí)行。如圖所示，本來(lái)在205ms處添加了定時(shí)器代碼，但是由于此時(shí)onclick事件還沒(méi)結(jié)束，故要等到300ms后才執(zhí)行定時(shí)器代碼

3. 清除事件 
window.clearTimeout(timeoutID);
4. 對(duì)于this的影響

setTimeout調(diào)用的代碼，運(yùn)行在與所在函數(shù)完全分離的執(zhí)行環(huán)境上，在非嚴(yán)格模式中，this默認(rèn)指向global或window，嚴(yán)格模式中會(huì)拋出undefined，通過(guò)call的方式目前也無(wú)法改變，官方的示例如下：

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

對(duì)此我們可以使用外加一個(gè)匿名函數(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í)間大于設(shè)定值

a.上文圖中所示，隊(duì)列中還有事件未執(zhí)行完成，需要等待
b.chrome和firefox在未激活的標(biāo)簽中，會(huì)減緩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.

舉個(gè)例子：

 setTimeout(function() {
            alert(2);
        }, 0);
        alert(1); //先顯示1，接著才顯示2
二、setInterval 1.定義

跟setTimeout類(lèi)似

window.setInterval(func, delay[,param1, param2, ...]);
window.setInterval(code, delay);

為了避免多個(gè)定時(shí)器代碼不間斷連續(xù)運(yùn)行好幾次，當(dāng)使用setInterval(),僅當(dāng)沒(méi)有該定時(shí)器的任何其他代碼實(shí)例時(shí)，才將定時(shí)器代碼添加到隊(duì)列中，通俗點(diǎn)就是等到上個(gè)定時(shí)器完成，再添加一個(gè)。

2.缺點(diǎn)

某些間隔會(huì)被跳過(guò)

多個(gè)定時(shí)器的代碼執(zhí)行之間的間隔可能會(huì)比預(yù)期小。

在5處，創(chuàng)建一個(gè)定時(shí)器
205處，添加一個(gè)定時(shí)器，但是onclick代碼沒(méi)執(zhí)行完成，等待
300處，onclick代碼執(zhí)行完畢，執(zhí)行第一個(gè)定時(shí)器
405處，添加第二個(gè)定時(shí)器，但前一個(gè)定時(shí)器沒(méi)有執(zhí)行完成，等待
605處，本來(lái)是要添加第三個(gè)定時(shí)器，但是此時(shí)發(fā)現(xiàn)，隊(duì)列中有了一個(gè)定時(shí)器，被跳過(guò)
等到第一個(gè)定時(shí)器代碼執(zhí)行完畢，馬上執(zhí)行第二個(gè)定時(shí)器，所以間隔會(huì)比預(yù)期的小。

3.解決方法

鏈?zhǔn)秸{(diào)用，如下圖所示，主要用于重復(fù)定時(shí)器

setTimeout(function(){
    //處理代碼
    setTimeout(arguments.callee,interval)
},intercal);

遞歸調(diào)用自己。

4. 清除事件 
window.clearInterval(intervalID)
三、兩者之間的區(qū)別

setTimeout方法，在一個(gè)指定的時(shí)間間隔后運(yùn)行代碼。
setInterval方法， 每隔一個(gè)固定的時(shí)間間隔后持續(xù)運(yùn)行指定代碼。

四、參考資料

MDN WindowTimers.setTimeout()

W3C Times

Chrome and Firefox throttle setTimeout/setInterval in inactive tabs

《JavaScript高級(jí)程序設(shè)計(jì)》Nicholas C.Zakas著 李松峰 曹力譯

你真的了解setTimeout和setInterval嗎

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90828.html

相關(guān)文章

  • process.nextTick() 、setTimeout()、setInterval() 運(yùn)行機(jī)

    摘要：注意如果主邏輯的代碼執(zhí)行時(shí)間已經(jīng)超過(guò)了第二個(gè)參數(shù)設(shè)置的時(shí)間，那么等運(yùn)行到該回調(diào)函數(shù)時(shí)，它會(huì)忽略掉這個(gè)時(shí)間，并立即執(zhí)行。如果某一個(gè)進(jìn)行大量的計(jì)算，那么它就會(huì)阻塞在當(dāng)前的回調(diào)函數(shù)中，等待該計(jì)算完成后，再執(zhí)行下一個(gè)的回調(diào)函數(shù)。 setTimeout() ? JavaScript是一個(gè)單線程的語(yǔ)言，也就是說(shuō)它同一時(shí)間只能執(zhí)行一段代碼，接下來(lái)我們通過(guò)兩個(gè)例子說(shuō)明一下單線程語(yǔ)言和多線程語(yǔ)言的...

    lscho 評(píng)論0 收藏0

  • setTimeout與setInterval

    摘要：工作線程執(zhí)行異步任務(wù)，執(zhí)行完成后把對(duì)應(yīng)額回調(diào)函數(shù)封裝成一條消息放到消息隊(duì)列中主線程不斷地從消息隊(duì)列中取消息并執(zhí)行。當(dāng)消息隊(duì)列為空時(shí)，主線程阻塞，直到消息隊(duì)列再次非空。取決于何時(shí)被主線程的事件循環(huán)取到，并執(zhí)行。 轉(zhuǎn)自：http://palmer.arkstack.cn/201...一：平時(shí)簡(jiǎn)單使用 1.setTimeout延遲一段時(shí)間執(zhí)行一次(only one) setTimeout(f...

    Tangpj 評(píng)論0 收藏0

  • JavaScript 定時(shí)器

    摘要：定時(shí)器方法相關(guān)方法有四種。返回值返回值是一個(gè)正整數(shù)，表示定時(shí)器的編號(hào)。這個(gè)值可以傳遞給來(lái)取消該定時(shí)器。使用方法很簡(jiǎn)單只有一個(gè)參數(shù)，該參數(shù)為您要取消定時(shí)器的標(biāo)識(shí)符。用法很簡(jiǎn)單當(dāng)代碼運(yùn)行到這行的時(shí)候，會(huì)取消所設(shè)置的定時(shí)器。 簡(jiǎn)單介紹在JavaScript中定時(shí)器有兩個(gè) setInterval() 與 setTime...

    王偉廷 評(píng)論0 收藏0

  • 定時(shí)器

    摘要：提供定時(shí)執(zhí)行代碼的功能，叫做定時(shí)器，主要由和這兩個(gè)函數(shù)來(lái)完成。它返回一個(gè)整數(shù)，表示定時(shí)器的編號(hào)，以后可以用來(lái)取消這個(gè)定時(shí)器。上面代碼中，回調(diào)函數(shù)不會(huì)再執(zhí)行了，因?yàn)閮蓚€(gè)定時(shí)器都被取消了。 JavaScript 提供定時(shí)執(zhí)行代碼的功能，叫做定時(shí)器（timer），主要由setTimeout()和setInterval()這兩個(gè)函數(shù)來(lái)完成。它們向任務(wù)隊(duì)列添加定時(shí)任務(wù)。 setTimeout()...

    Nino 評(píng)論0 收藏0

  • 從setTimeout-setInterval看JS線程

    摘要：提出標(biāo)準(zhǔn)，允許腳本創(chuàng)建多個(gè)線程，但是子線程完全受主線程控制，且不得操作。所以，這個(gè)新標(biāo)準(zhǔn)并沒(méi)有改變單線程的本質(zhì)。事件循環(huán)主線程線程只會(huì)做一件事，就是從消息隊(duì)列里面取消息執(zhí)行消息，再取消息再執(zhí)行。工作線程是生產(chǎn)者，主線程是消費(fèi)者。 最近項(xiàng)目中遇到了一個(gè)場(chǎng)景，其實(shí)很常見(jiàn)，就是定時(shí)獲取接口刷新數(shù)據(jù)。那么問(wèn)題來(lái)了，假設(shè)我設(shè)置的定時(shí)時(shí)間為1s，而數(shù)據(jù)接口返回大于1s，應(yīng)該用同步阻塞還是異步？我們...

    elliott_hu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<