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

資訊專欄INFORMATION COLUMN

細(xì)說(shuō) Javascript 拾遺篇（四） : setTimeout 和 setInterval

wangjuntytl / 3434人閱讀

摘要：當(dāng)間隔時(shí)間設(shè)置較小時(shí)，將會(huì)導(dǎo)致回調(diào)函數(shù)堆積。處理可能阻塞的代碼最簡(jiǎn)單且最可控的方式就是在回調(diào)函數(shù)內(nèi)部使用函數(shù)。但是很明顯，由于指定最大值的限制，還會(huì)有定時(shí)器沒(méi)有被清除掉。另外，盡量避免使用函數(shù)，從而避免可能導(dǎo)致的回調(diào)函數(shù)堆積現(xiàn)象。

由于 Javascript 是異步的，因此我們可以通過(guò) setTimeout 和 setInterval 函數(shù)來(lái)指定特定時(shí)間執(zhí)行代碼。

function foo() {}
var id = setTimeout(foo, 1000); // returns a Number > 0

上例中，當(dāng) setTimeout 函數(shù)被調(diào)用時(shí)，它會(huì)返回一個(gè)標(biāo)志延時(shí)的 ID 并計(jì)劃在大約 1000 毫秒后調(diào)用 foo 函數(shù)，函數(shù) foo 將只會(huì)執(zhí)行一次。
根據(jù) Javascript 引擎的計(jì)時(shí)方法，以及 Javascript 單線程的本質(zhì)，因此其他代碼執(zhí)行時(shí)可能會(huì)阻塞此線程，我們無(wú)法保證 setTimeout 函數(shù)內(nèi)調(diào)用的函數(shù)會(huì)在指定的時(shí)間被執(zhí)行。
setTimeout 函數(shù)的第一個(gè)參數(shù)將會(huì)在全局作用域內(nèi)執(zhí)行，因此參數(shù)內(nèi)的 this 將會(huì)指向全局對(duì)象。

function Foo() {
    this.value = 42;
    this.method = function() {
        // this refers to the global object
        console.log(this.value); // will log undefined
    };
    setTimeout(this.method, 500);
}
new Foo();

這里要注意一個(gè)常犯的錯(cuò)誤，setTimeout 函數(shù)的第一個(gè)參數(shù)指的是函數(shù)對(duì)象本身，不能寫成類似 setTimeout(foo(), 1000)，因?yàn)?foo() 是函數(shù)返回值，而不是 foo 本身。

setInterval 函數(shù)的堆調(diào)用

從上文已知，setTimeout 中的回調(diào)函數(shù)只會(huì)執(zhí)行一次，而 setInterval 函數(shù)，正如函數(shù)的名字一樣，它會(huì)每隔指定時(shí)間執(zhí)行一次回調(diào)函數(shù)。
即使回調(diào)函數(shù)的執(zhí)行被阻塞，setInterval 函數(shù)依然會(huì)繼續(xù)調(diào)用更多的回調(diào)函數(shù)。當(dāng)間隔時(shí)間設(shè)置較小時(shí)，將會(huì)導(dǎo)致回調(diào)函數(shù)堆積。

function foo(){
    // something that blocks for 1 second
}
setInterval(foo, 1000);

上述代碼中，函數(shù) foo 被調(diào)用后將被阻塞一秒鐘。

處理可能阻塞的代碼

最簡(jiǎn)單且最可控的方式就是在回調(diào)函數(shù)內(nèi)部使用 setTimeout 函數(shù)。

function foo(){
    // something that blocks for 1 second
    setTimeout(foo, 1000);
}
foo();

這樣不僅封裝了 setTimeout 的調(diào)用，同時(shí)也阻止了可能存在的回調(diào)函數(shù)堆積。foo 函數(shù)現(xiàn)在可以自己控制是否繼續(xù)或終止。

手動(dòng)清除定時(shí)器

清除定時(shí)器可以通過(guò)傳遞指定的 ID 給 clearTimeout 或 clearInterval 函數(shù)。

var id = setTimeout(foo, 1000);
clearTimeout(id);
清除所有的定時(shí)器

Javascript 中并沒(méi)有內(nèi)置的函數(shù)方法來(lái)清除所有的定時(shí)器（timeout 或 interval），不過(guò)我們可以使用一種暴力的方法來(lái)清除所有的定時(shí)器。

// clear "all" timeouts
for(var i = 1; i < 1000; i++) {
    clearTimeout(i);
}

但是很明顯，由于指定最大值的限制，還會(huì)有定時(shí)器沒(méi)有被清除掉。由于 ID 會(huì)隨著定時(shí)器被調(diào)用的增加而增加，因此更好的方法是記錄下最大的 ID 并一起清除。

// clear "all" timeouts
var biggestTimeoutId = window.setTimeout(function(){}, 1),
i;
for(i = 1; i <= biggestTimeoutId; i++) {
    clearTimeout(i);
}
eval 的隱式使用

setTimeout 和 setInterval 函數(shù)的第一個(gè)參數(shù)也可以接收字符串，但是盡量不要使用這個(gè)功能，因?yàn)檫@會(huì)在內(nèi)部調(diào)用 eval 函數(shù)來(lái)執(zhí)行這段字符串。

function foo() {
    // will get called
}

function bar() {
    function foo() {
        // never gets called
    }
    setTimeout("foo()", 1000);
}
bar();

由于 eval 函數(shù)并沒(méi)有在上例中被直接調(diào)用，因此傳遞到 setTimeout 函數(shù)的字符串將會(huì)在全局作用域下被執(zhí)行，所以不會(huì)調(diào)用函數(shù) bar 內(nèi)部的 foo 函數(shù)。
建議盡量不要在使用定時(shí)器函數(shù)時(shí)通過(guò)字符串形式來(lái)傳遞參數(shù)。

function foo(a, b, c) {}

// NEVER use this
setTimeout("foo(1, 2, 3)", 1000)

// Instead use an anonymous function
setTimeout(function() {
    foo(a, b, c);
}, 1000)
總結(jié)

不要使用字符串作為 setTimeout 或 setInterval 函數(shù)的參數(shù)，當(dāng)需要向回調(diào)函數(shù)中傳遞參數(shù)時(shí)，我們可以用匿名函數(shù)的，在匿名函數(shù)內(nèi)部執(zhí)行回調(diào)函數(shù)。
另外，盡量避免使用 setInterval 函數(shù)，從而避免可能導(dǎo)致的回調(diào)函數(shù)堆積現(xiàn)象。

參考

http://bonsaiden.github.io/JavaScript-Garden/#other.timeouts

后言

終于將整個(gè) Javascript Garden 都學(xué)習(xí)了一遍，基本上每一個(gè)章節(jié)都翻譯了一遍，同時(shí)加上了自己的一些想法和筆記，大概花了半個(gè)多月的時(shí)間，感覺(jué)這的的確確是個(gè)很適合自己的學(xué)習(xí)方法，有時(shí)候忘記某些概念，我立馬就能在自己的博客中找到相關(guān)的知識(shí)并及時(shí)回顧，由于出自自己的筆下，所以很快就能回憶起來(lái)。希望自己能堅(jiān)持這個(gè)好的習(xí)慣，也希望自己的博文能給博友們帶來(lái)些許的幫助，大家相互學(xué)習(xí)，共同進(jìn)步！

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

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

相關(guān)文章

  • 細(xì)說(shuō) Javascript 拾遺篇（一） : 遠(yuǎn)離 eval 函數(shù)

    摘要：然而，函數(shù)只有在當(dāng)前作用域中直接被調(diào)用并且被調(diào)用的函數(shù)名為才會(huì)被執(zhí)行。在全局作用域下，這個(gè)字符串會(huì)一直被執(zhí)行，在這個(gè)情形下我們并沒(méi)有直接調(diào)用函數(shù)，也可以執(zhí)行字符串?？偨Y(jié)函數(shù)應(yīng)該盡可能地避免使用。 Javascript 的 eval 函數(shù)可以在當(dāng)前作用域執(zhí)行一段包含 Javascript 代碼的字符串。 var foo = 1; function test() { var fo...

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

  • 細(xì)說(shuō) Javascript 拾遺篇（二） : undefined 和 null

    摘要：有兩個(gè)可以表示空的值，分別是和，比較有作用的是前者。訪問(wèn)聲明但未初始化的變量。有返回值時(shí)函數(shù)的表達(dá)式?jīng)]有顯式的返回任何內(nèi)容。然而，為了比較其他變量和值，我們需要提前取得的值。因此，從標(biāo)準(zhǔn)實(shí)行后，全局變量已經(jīng)是不再可寫。 Javascript 有兩個(gè)可以表示空的值，分別是 undefined 和 null，比較有作用的是前者。 undefined undefined 是一種值為 un...

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

  • 細(xì)說(shuō) Javascript 拾遺篇（三） : 自動(dòng)插入分號(hào)

    摘要：此時(shí)會(huì)自動(dòng)插入分號(hào)，解析器將再次嘗試。工作原理下面的代碼沒(méi)有分號(hào)，因此解析器將會(huì)自己判斷在哪些地方插入分號(hào)。前置小括號(hào)在有前置小括號(hào)的情形時(shí)，解析器將不會(huì)自動(dòng)插入分號(hào)。這不僅將保證代碼整體的一致性，也將有效地避免解析器對(duì)代碼行為的錯(cuò)誤改變。 盡管 Javascript 有類似 C 的句法風(fēng)格，但是它并不強(qiáng)制在代碼中使用分號(hào)，所以分號(hào)可能被省略。Javascript 并不是一個(gè)缺少分號(hào)的...

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

  • 簡(jiǎn)單說(shuō) JavaScript實(shí)現(xiàn)雪花飄落效果

    摘要：說(shuō)明這次實(shí)現(xiàn)的雪花飄落的效果很簡(jiǎn)單，主要是為了練習(xí)練習(xí)中的定時(shí)器，和。簡(jiǎn)單說(shuō)，意思就是用了這個(gè)定時(shí)器，能把兩次修改樣式的代碼分開(kāi)執(zhí)行，可以先把第一次修改的樣式渲染后，在進(jìn)行第二次的修改，雪花就會(huì)動(dòng)了。 說(shuō)明 這次實(shí)現(xiàn)的雪花飄落的效果很簡(jiǎn)單，主要是為了練習(xí)練習(xí)JavaScript中的定時(shí)器，setTimeout 和 setInterval。 效果圖 showImg(https://seg...

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

  • 簡(jiǎn)單說(shuō) JavaScript實(shí)現(xiàn)雪花飄落效果

    摘要：說(shuō)明這次實(shí)現(xiàn)的雪花飄落的效果很簡(jiǎn)單，主要是為了練習(xí)練習(xí)中的定時(shí)器，和。簡(jiǎn)單說(shuō)，意思就是用了這個(gè)定時(shí)器，能把兩次修改樣式的代碼分開(kāi)執(zhí)行，可以先把第一次修改的樣式渲染后，在進(jìn)行第二次的修改，雪花就會(huì)動(dòng)了。 說(shuō)明 這次實(shí)現(xiàn)的雪花飄落的效果很簡(jiǎn)單，主要是為了練習(xí)練習(xí)JavaScript中的定時(shí)器，setTimeout 和 setInterval。 效果圖 showImg(https://seg...

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

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

0條評(píng)論

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