摘要:當(dāng)間隔時(shí)間設(shè)置較小時(shí),將會導(dǎo)致回調(diào)函數(shù)堆積。處理可能阻塞的代碼最簡單且最可控的方式就是在回調(diào)函數(shù)內(nèi)部使用函數(shù)。但是很明顯,由于指定最大值的限制,還會有定時(shí)器沒有被清除掉。另外,盡量避免使用函數(shù),從而避免可能導(dǎo)致的回調(diào)函數(shù)堆積現(xiàn)象。
由于 Javascript 是異步的,因此我們可以通過 setTimeout 和 setInterval 函數(shù)來指定特定時(shí)間執(zhí)行代碼。
function foo() {} var id = setTimeout(foo, 1000); // returns a Number > 0
上例中,當(dāng) setTimeout 函數(shù)被調(diào)用時(shí),它會返回一個(gè)標(biāo)志延時(shí)的 ID 并計(jì)劃在大約 1000 毫秒后調(diào)用 foo 函數(shù),函數(shù) foo 將只會執(zhí)行一次。
根據(jù) Javascript 引擎的計(jì)時(shí)方法,以及 Javascript 單線程的本質(zhì),因此其他代碼執(zhí)行時(shí)可能會阻塞此線程,我們無法保證 setTimeout 函數(shù)內(nèi)調(diào)用的函數(shù)會在指定的時(shí)間被執(zhí)行。
setTimeout 函數(shù)的第一個(gè)參數(shù)將會在全局作用域內(nèi)執(zhí)行,因此參數(shù)內(nèi)的 this 將會指向全局對象。
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ù)對象本身,不能寫成類似 setTimeout(foo(), 1000),因?yàn)?foo() 是函數(shù)返回值,而不是 foo 本身。
setInterval 函數(shù)的堆調(diào)用從上文已知,setTimeout 中的回調(diào)函數(shù)只會執(zhí)行一次,而 setInterval 函數(shù),正如函數(shù)的名字一樣,它會每隔指定時(shí)間執(zhí)行一次回調(diào)函數(shù)。
即使回調(diào)函數(shù)的執(zhí)行被阻塞,setInterval 函數(shù)依然會繼續(xù)調(diào)用更多的回調(diào)函數(shù)。當(dāng)間隔時(shí)間設(shè)置較小時(shí),將會導(dǎo)致回調(diào)函數(shù)堆積。
function foo(){ // something that blocks for 1 second } setInterval(foo, 1000);
上述代碼中,函數(shù) foo 被調(diào)用后將被阻塞一秒鐘。
處理可能阻塞的代碼最簡單且最可控的方式就是在回調(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í)器可以通過傳遞指定的 ID 給 clearTimeout 或 clearInterval 函數(shù)。
var id = setTimeout(foo, 1000); clearTimeout(id);清除所有的定時(shí)器
Javascript 中并沒有內(nèi)置的函數(shù)方法來清除所有的定時(shí)器(timeout 或 interval),不過我們可以使用一種暴力的方法來清除所有的定時(shí)器。
// clear "all" timeouts for(var i = 1; i < 1000; i++) { clearTimeout(i); }
但是很明顯,由于指定最大值的限制,還會有定時(shí)器沒有被清除掉。由于 ID 會隨著定時(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)檫@會在內(nèi)部調(diào)用 eval 函數(shù)來執(zhí)行這段字符串。
function foo() { // will get called } function bar() { function foo() { // never gets called } setTimeout("foo()", 1000); } bar();
由于 eval 函數(shù)并沒有在上例中被直接調(diào)用,因此傳遞到 setTimeout 函數(shù)的字符串將會在全局作用域下被執(zhí)行,所以不會調(diào)用函數(shù) bar 內(nèi)部的 foo 函數(shù)。
建議盡量不要在使用定時(shí)器函數(shù)時(shí)通過字符串形式來傳遞參數(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í)間,感覺這的的確確是個(gè)很適合自己的學(xué)習(xí)方法,有時(shí)候忘記某些概念,我立馬就能在自己的博客中找到相關(guān)的知識并及時(shí)回顧,由于出自自己的筆下,所以很快就能回憶起來。希望自己能堅(jiān)持這個(gè)好的習(xí)慣,也希望自己的博文能給博友們帶來些許的幫助,大家相互學(xué)習(xí),共同進(jìn)步!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/78124.html
摘要:然而,函數(shù)只有在當(dāng)前作用域中直接被調(diào)用并且被調(diào)用的函數(shù)名為才會被執(zhí)行。在全局作用域下,這個(gè)字符串會一直被執(zhí)行,在這個(gè)情形下我們并沒有直接調(diào)用函數(shù),也可以執(zhí)行字符串。總結(jié)函數(shù)應(yīng)該盡可能地避免使用。 Javascript 的 eval 函數(shù)可以在當(dāng)前作用域執(zhí)行一段包含 Javascript 代碼的字符串。 var foo = 1; function test() { var fo...
摘要:有兩個(gè)可以表示空的值,分別是和,比較有作用的是前者。訪問聲明但未初始化的變量。有返回值時(shí)函數(shù)的表達(dá)式?jīng)]有顯式的返回任何內(nèi)容。然而,為了比較其他變量和值,我們需要提前取得的值。因此,從標(biāo)準(zhǔn)實(shí)行后,全局變量已經(jīng)是不再可寫。 Javascript 有兩個(gè)可以表示空的值,分別是 undefined 和 null,比較有作用的是前者。 undefined undefined 是一種值為 un...
摘要:此時(shí)會自動(dòng)插入分號,解析器將再次嘗試。工作原理下面的代碼沒有分號,因此解析器將會自己判斷在哪些地方插入分號。前置小括號在有前置小括號的情形時(shí),解析器將不會自動(dòng)插入分號。這不僅將保證代碼整體的一致性,也將有效地避免解析器對代碼行為的錯(cuò)誤改變。 盡管 Javascript 有類似 C 的句法風(fēng)格,但是它并不強(qiáng)制在代碼中使用分號,所以分號可能被省略。Javascript 并不是一個(gè)缺少分號的...
摘要:說明這次實(shí)現(xiàn)的雪花飄落的效果很簡單,主要是為了練習(xí)練習(xí)中的定時(shí)器,和。簡單說,意思就是用了這個(gè)定時(shí)器,能把兩次修改樣式的代碼分開執(zhí)行,可以先把第一次修改的樣式渲染后,在進(jìn)行第二次的修改,雪花就會動(dòng)了。 說明 這次實(shí)現(xiàn)的雪花飄落的效果很簡單,主要是為了練習(xí)練習(xí)JavaScript中的定時(shí)器,setTimeout 和 setInterval。 效果圖 showImg(https://seg...
摘要:說明這次實(shí)現(xiàn)的雪花飄落的效果很簡單,主要是為了練習(xí)練習(xí)中的定時(shí)器,和。簡單說,意思就是用了這個(gè)定時(shí)器,能把兩次修改樣式的代碼分開執(zhí)行,可以先把第一次修改的樣式渲染后,在進(jìn)行第二次的修改,雪花就會動(dòng)了。 說明 這次實(shí)現(xiàn)的雪花飄落的效果很簡單,主要是為了練習(xí)練習(xí)JavaScript中的定時(shí)器,setTimeout 和 setInterval。 效果圖 showImg(https://seg...
閱讀 658·2021-11-23 09:51
閱讀 3258·2021-10-11 10:58
閱讀 15407·2021-09-29 09:47
閱讀 3529·2021-09-01 11:42
閱讀 1281·2019-08-29 16:43
閱讀 1832·2019-08-29 15:37
閱讀 2089·2019-08-29 12:56
閱讀 1719·2019-08-28 18:21