js循環和閉包的小總結

BetaRabbit 發布于2019-08-22 18:01 / 1725人閱讀

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

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

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

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

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

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

結果就出來了

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

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

結果也能出來。

GPU云服務器云服務器循環閉包閉包循環閉包和回調 js閉包

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95413.html

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

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

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

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

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

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

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

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

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

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

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