js循環(huán)和閉包的小總結(jié)

BetaRabbit 發(fā)布于2019-08-22 18:01 / 1783人閱讀

摘要：循環(huán)和閉包循環(huán)是最常見說明閉包的例子了，我分享一下自己踩的坑。結(jié)果就出來了還有一種最簡單有效的方法是循環(huán)中的變量用聲明，會讓每次迭代都會聲明。

循環(huán)和閉包
for循環(huán)是最常見說明閉包的例子了，我分享一下自己踩的坑。

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

一開始我以為打印的結(jié)果是每秒打印出來1 2 3 4 5，沒想到的是我錯了
結(jié)果竟然是五個6.我去，什么鬼？？
后來仔細想想延遲函數(shù)的回調(diào)會在循環(huán)結(jié)束時才執(zhí)行，因此會輸出五個6。那么問題來了，代碼出了什么問題呢？原來是循環(huán)中每個迭代在運行時都會給自己捕獲一個i,然后我該怎么做才能讓它打印出我想要的結(jié)果呢？

我們需要更多的閉包作用域，特別是每個迭代都需要一個閉包作用域。
我是通過申聲明并立即執(zhí)行函數(shù)來創(chuàng)建一個函數(shù)來創(chuàng)建作用域。

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

結(jié)果就出來了

還有一種最簡單有效的方法是for循環(huán)中的變量用let聲明，let會讓每次迭代都會聲明。

for(let i=1;i<=5;i++){
    setTimeout(function timer(){
        console.log(i)
    },i*1000);
}

結(jié)果也能出來。

云服務(wù)器 GPU云服務(wù)器循環(huán)閉包閉包循環(huán) 閉包和回調(diào) js閉包

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95413.html

相關(guān)文章

深入理解JavaScript（二）：由一道題來思考閉包

摘要：中所有的事件綁定都是異步編程當前這件事件沒有徹底完成，不再等待，繼續(xù)執(zhí)行下面的任務(wù)當綁定事件后，不需要等待執(zhí)行，繼續(xù)執(zhí)行下一個循環(huán)任務(wù)，所以當我們點擊執(zhí)行方法的時候，循環(huán)早已結(jié)束即是最后。概念閉包就是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù) 點擊li標簽彈出對應(yīng)數(shù)字 0 1...

曹金海 2019-08-26 10:32 評論0 收藏0
原生js練習題-第一課

摘要：于是找來了前輩們留下的經(jīng)典原生練習題，以期把看過的內(nèi)容用起來，加深自己對原生的掌握。鼠標移入移出改變樣式實現(xiàn)效果繼續(xù)樣式轉(zhuǎn)換，雖然用的偽類便能實現(xiàn)，但既然是的練習題就得用用鼠標事件了。 0x0關(guān)于這個系列差不多把《js高級程序設(shè)計》刷完了，所謂實踐出真知，尤其編程這種實踐和經(jīng)驗相當重要的事情，不能光說不做。但以我現(xiàn)在的水平，直接上手那些大項目是還是不夠格的，還是得一步步扎實好基礎(chǔ)再有...

mdluo 2019-08-21 13:29 評論0 收藏0
2017文章總結(jié)

摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅高性能滾動 scroll 及頁面渲染優(yōu)化理論 | HTML寫法...

dailybird 2019-08-01 18:28 評論0 收藏0
2017文章總結(jié)

摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅高性能滾動 scroll 及頁面渲染優(yōu)化理論 | HTML寫法...

hellowoody 2019-08-22 14:02 評論0 收藏0
2017文章總結(jié)

摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅高性能滾動 scroll 及頁面渲染優(yōu)化理論 | HTML寫法...

wwolf 2019-08-29 14:21 評論0 收藏0