我們這次使用setTimeout來實(shí)現(xiàn)一個按照時間定時,依次打印數(shù)值的例子.其實(shí)在早期的時候,也是我經(jīng)常犯的一個錯誤,或者實(shí)現(xiàn)這種能力,似乎js比較牽強(qiáng),其實(shí)是我的錯,哈哈!沒能理解JS強(qiáng)大之處.我們直接進(jìn)入主題吧!   注意,如果用setInterval來實(shí)現(xiàn)的話,那肯定很簡單,這次我們是使用setTimeout.   我們先從最簡單思考入手.那就會寫出下面的代碼.

for(var i = 0; i < 5; i++)
{ 
setTimeout(console.log(i),i*1000); 
} 

這段代碼雖然依次打印了,每個i的值0,1,2,3,4.但是,執(zhí)行的時間卻沒有起作用.為什么呢? 因?yàn)?console.log() 是方法的執(zhí)行調(diào)用,在調(diào)用這個方法后,當(dāng)是馬上執(zhí)行!,所以沒有達(dá)到我們預(yù)期的目的。  

那我們繼續(xù)看下面一段代碼

for(var i = 0; i< 5; i++ ){ setTimeout(function(){ console.log(i); },i*1000); } 

這里我們使用一個匿名函數(shù)包含了打印的console.log來打印i,所以 i這個值是共享的,還沒等到執(zhí)行第一個setTimeout的時候,for循環(huán)已經(jīng)執(zhí)行完成,最后的i = 5,所以i 會打印四次   其實(shí)我們兩種解決辦法,我們先來看第一種:

var j = 0; function abc(){ console.log("j = "+j); j++; }  
for(var i = 0; i < 10; i++ ){ 
setTimeout(abc,i*1000) } 

這里我們另外一個全局變量來存儲值,每執(zhí)行一次函數(shù)abc,j就加一次,所以執(zhí)行到setTimeout的時候,就會調(diào)用abc函數(shù),所以會達(dá)到我們預(yù)期的效果,但是這里這個j是一個全局變量,全局變量會造成容易改變其值或者命名沖突等問題.   第二種辦法的實(shí)現(xiàn),我們再次引入閉包函數(shù).因?yàn)殚]包函數(shù),每一次創(chuàng)建都會存在一個自己的空間來存儲唯一的值.所以利用這個思維.我們把代碼寫成下面的代碼.

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ù),這樣每一個閉包函數(shù)里存儲的i值,就都不會一樣.所以就是達(dá)到我們的想要的結(jié)果.

ps：使用閉包對setTimeout進(jìn)行簡單封裝

在寫js腳本時，經(jīng)常會用到一些拼寫函數(shù)的情況，例如調(diào)用setTimeout

var msgalert="test"; 
 function TestAlert(msg) 
   { 
    alert(msg) 
   } 
    
   $(document).ready(function () { 
  $("#btnCancel").click(function (e) { 
    setTimeout("TestAlert("+msgalert+")",1000); 
    }); 
}) 

查了很長時間，為什么就是彈不出對話框呢。檢查了很長時間才發(fā)現(xiàn)，原來是少了一對單引號

$(document).ready(function () { 
  $("#btnCancel").click(function (e) { 
    setTimeout("TestAlert('"+msgalert+"')",1000); 
    }); 
}) 

這樣的寫法容易出錯，還不容易檢查出錯誤，如果使用閉包就可完全避免，改寫如下

 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) 
 }); 

由于使用了閉包，也簡單了很多，檢查錯誤也很容易了

最新評論