相信大家一定會遇見使用定時器產(chǎn)生的bug,例如下面這樣:
for(var i=0;i<5;i++){
setTimeout(function(){
console.log(i)
},0)
}
輸出
為什么不是01234?
這是因為setTimeout在瀏覽器中執(zhí)行的時候,是將定時器拿出來放在一邊,等到系統(tǒng)的js執(zhí)行完畢之后才開始執(zhí)行.
setTimeout(函數(shù),間隔時間),這個時間間隔是理想狀態(tài)下的時間間隔,如果系統(tǒng)的js執(zhí)行時間大于這個時間間隔,那會在系統(tǒng)js執(zhí)行完畢后立刻執(zhí)行定時器,如果系統(tǒng)js執(zhí)行時間小于這個時間間隔,那定制器會一直等到時間間隔才執(zhí)行.
所以上述的代碼執(zhí)行的時候是創(chuàng)建了5個定時器放在一邊,等到for循環(huán)執(zhí)行完畢,i已經(jīng)變成5了之后再執(zhí)行定時器,當然是輸出5個5了
執(zhí)行順序
解決辦法
將定時器用閉包封裝起來
for(var i=0;i<5;i++){
(function(i){
setTimeout(function(){
console.log(i)
},0)
})(i)
}
輸出正確
執(zhí)行順序
