我們這次使用setTimeout來實現一個按照時間定時,依次打印數值的例子.其實在早期的時候,也是我經常犯的一個錯誤,或者實現這種能力,似乎js比較牽強,其實是我的錯,哈哈!沒能理解JS強大之處.我們直接進入主題吧!
注意,如果用setInterval來實現的話,那肯定很簡單,這次我們是使用setTimeout.
我們先從最簡單思考入手.那就會寫出下面的代碼.
for(var i = 0; i < 5; i++){
setTimeout(console.log(i),i*1000);
}
這段代碼雖然依次打印了,每個i的值0,1,2,3,4.但是,執行的時間卻沒有起作用.為什么呢? 因為 console.log() 是方法的執行調用,在調用這個方法后,當是馬上執行!,所以沒有達到我們預期的目的
那我們繼續看下面一段代碼
for(var i = 0; i< 5; i++ ){
setTimeout(function(){
console.log(i);
},i*1000);
}
這里我們使用一個匿名函數包含了打印的console.log來打印i,所以 i這個值是共享的,還沒等到執行第一個setTimeout的時候,for循環已經執行完成,最后的i = 5,所以i 會打印四次
其實我們兩種解決辦法,我們先來看第一種:
var j = 0;
function abc(){
console.log("j = "+j);
j++;
}
for(var i = 0; i < 10; i++ ){
setTimeout(abc,i*1000)
}
這里我們另外一個全局變量來存儲值,每執行一次函數abc,j就加一次,所以執行到setTimeout的時候,就會調用abc函數,所以會達到我們預期的效果,但是這里這個j是一個全局變量,全局變量會造成容易改變其值或者命名沖突等問題.
第二種辦法的實現,我們再次引入閉包函數.因為閉包函數,每一次創建都會存在一個自己的空間來存儲唯一的值.所以利用這個思維.我們把代碼寫成下面的代碼.
for(var i = 0; i < 10; i++ ){
(function(x){
setTimeout(function(){
console.log(x)
},x*1000)
})(i)
}
我們將i的每一次執行for循環的值,傳給不同創建的閉包函數,這樣每一個閉包函數里存儲的i值,就都不會一樣.所以就是達到我們的想要的結果.
本文屬於吳統威的博客,微信公眾號:bianchengderen,QQ群:186659233 的原創文章,轉載時請注明出處及相應鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=161 ,歡迎大家傳播與分享.
我們這次使用setTimeout來實現一個按照時間定時,依次打印數值的例子.其實在早期的時候,也是我經常犯的一個錯誤,或者實現這種能力,似乎js比較牽強,其實是我的錯,哈哈!沒能理解JS強大之處.我們直接進入主題吧!