我們這次使用setTimeout來(lái)實(shí)現(xiàn)一個(gè)按照時(shí)間定時(shí),依次打印數(shù)值的例子.其實(shí)在早期的時(shí)候,也是我經(jīng)常犯的一個(gè)錯(cuò)誤,或者實(shí)現(xiàn)這種能力,似乎js比較牽強(qiáng),其實(shí)是我的錯(cuò),哈哈!沒(méi)能理解JS強(qiáng)大之處.我們直接進(jìn)入主題吧! 注意,如果用setInterval來(lái)實(shí)現(xiàn)的話,那肯定很簡(jiǎn)單,這次我們是使用setTimeout. 我們先從最簡(jiǎn)單思考入手.那就會(huì)寫出下面的代碼.
for(var i = 0; i < 5; i++){ setTimeout(console.log(i),i*1000); }
這段代碼雖然依次打印了,每個(gè)i的值0,1,2,3,4.但是,執(zhí)行的時(shí)間卻沒(méi)有起作用.為什么呢? 因?yàn)?console.log() 是方法的執(zhí)行調(diào)用,在調(diào)用這個(gè)方法后,當(dāng)是馬上執(zhí)行!,所以沒(méi)有達(dá)到我們預(yù)期的目的。
那我們繼續(xù)看下面一段代碼
for(var i = 0; i< 5; i++ ){ setTimeout(function(){ console.log(i); },i*1000); }
這里我們使用一個(gè)匿名函數(shù)包含了打印的console.log來(lái)打印i,所以 i這個(gè)值是共享的,還沒(méi)等到執(zhí)行第一個(gè)setTimeout的時(shí)候,for循環(huán)已經(jīng)執(zhí)行完成,最后的i = 5,所以i 會(huì)打印四次 其實(shí)我們兩種解決辦法,我們先來(lái)看第一種:
var j = 0; function abc(){ console.log("j = "+j); j++; } for(var i = 0; i < 10; i++ ){ setTimeout(abc,i*1000) }
這里我們另外一個(gè)全局變量來(lái)存儲(chǔ)值,每執(zhí)行一次函數(shù)abc,j就加一次,所以執(zhí)行到setTimeout的時(shí)候,就會(huì)調(diào)用abc函數(shù),所以會(huì)達(dá)到我們預(yù)期的效果,但是這里這個(gè)j是一個(gè)全局變量,全局變量會(huì)造成容易改變其值或者命名沖突等問(wèn)題. 第二種辦法的實(shí)現(xiàn),我們?cè)俅我腴]包函數(shù).因?yàn)殚]包函數(shù),每一次創(chuàng)建都會(huì)存在一個(gè)自己的空間來(lái)存儲(chǔ)唯一的值.所以利用這個(gè)思維.我們把代碼寫成下面的代碼.
for(var i = 0; i < 10; i++ ){ (function(x){ setTimeout(function(){ console.log(x) },x*1000) })(i) }
我們將i的每一次執(zhí)行for循環(huán)的值,傳給不同創(chuàng)建的閉包函數(shù),這樣每一個(gè)閉包函數(shù)里存儲(chǔ)的i值,就都不會(huì)一樣.所以就是達(dá)到我們的想要的結(jié)果.
ps:使用閉包對(duì)setTimeout進(jìn)行簡(jiǎn)單封裝
在寫js腳本時(shí),經(jīng)常會(huì)用到一些拼寫函數(shù)的情況,例如調(diào)用setTimeout
var msgalert="test"; function TestAlert(msg) { alert(msg) } $(document).ready(function () { $("#btnCancel").click(function (e) { setTimeout("TestAlert("+msgalert+")",1000); }); })
查了很長(zhǎng)時(shí)間,為什么就是彈不出對(duì)話框呢。檢查了很長(zhǎng)時(shí)間才發(fā)現(xiàn),原來(lái)是少了一對(duì)單引號(hào)
$(document).ready(function () { $("#btnCancel").click(function (e) { setTimeout("TestAlert('"+msgalert+"')",1000); }); })
這樣的寫法容易出錯(cuò),還不容易檢查出錯(cuò)誤,如果使用閉包就可完全避免,改寫如下
var msgalert="test"; function dalayAlert(msg ,time){ setTimeout( TestAlert(msg), time ); } function TestAlert(msg) { alert(msg) } $(document).ready(function () { $("#btnCancel").click(function (e) { dalayAlert(msgalert,1000) });
由于使用了閉包,也簡(jiǎn)單了很多,檢查錯(cuò)誤也很容易了