setTimeout使用閉包功能,實現定時打印數值

咱們此次使用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強大之處.咱們直接進入主題吧!