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

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

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

循環(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，沒想到的是我錯(cuò)了
結(jié)果竟然是五個(gè)6.我去，什么鬼？？
后來仔細(xì)想想延遲函數(shù)的回調(diào)會(huì)在循環(huán)結(jié)束時(shí)才執(zhí)行，因此會(huì)輸出五個(gè)6。那么問題來了，代碼出了什么問題呢？原來是循環(huán)中每個(gè)迭代在運(yùn)行時(shí)都會(huì)給自己捕獲一個(gè)i,然后我該怎么做才能讓它打印出我想要的結(jié)果呢？

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

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

結(jié)果就出來了

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

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

結(jié)果也能出來。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95413.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

wwolf 2019-08-29 14:21 評(píng)論0 收藏0