我們這次使用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值,就都不會一樣.所以就是達到我們的想要的結果.
ps:使用閉包對setTimeout進行簡單封裝
寫js腳本時,常常會用到一些拼字函數的情況,例如呼叫setTimeout
var msgalert="test"; function TestAlert(msg) { alert(msg) } $(document).ready(function () { $("#btnCancel").click(function (e) { setTimeout("TestAlert("+msgalert+")",1000); }); })
查了很長時間,為什麼就是彈不出對話框。檢查了很久才發現,原來是少了一對單引號
$(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) });
由於使用了閉包,也簡單了很多,檢查錯誤也很容易了