循環(huán)中的異步&&循環(huán)中的閉包

Near_Li 發(fā)布于2019-08-23 15:37 / 881人閱讀

摘要：原文鏈接在這之前先要了解一下循環(huán)中和的區(qū)別是函數(shù)級作用域或者全局作用域，是塊級作用域看一個例子循環(huán)中的邏輯代碼函數(shù)下的輸出，全局下的不存在現(xiàn)在我們把換為循環(huán)中的邏輯代碼報錯了，不在函數(shù)作用域下，當然肯定也不會再全局下因為和的這個區(qū)別當然和的

原文鏈接
在這之前先要了解一下

for循環(huán)中l(wèi)et 和var的區(qū)別

var 是函數(shù)級作用域或者全局作用域，let是塊級作用域
看一個例子

    function foo() {
      for (var index = 0; index < array.length; index++) {
        //..循環(huán)中的邏輯代碼
      }
      console.log(index);//=>5
    }
    foo()
   console.log(index)//Uncaught ReferenceError: index is not defined

foo函數(shù)下的index輸出5，全局下的index不存在
現(xiàn)在我們把var 換為let

    function foo() {
      for (let index = 0; index < array.length; index++) {
        //..循環(huán)中的邏輯代碼
      }
      console.log(index)//Uncaught ReferenceError: index is not defined
    }
    foo()

報錯了，index不在foo函數(shù)作用域下，當然肯定也不會再全局下
因為var和let的這個區(qū)別（當然var和let的區(qū)別不止于此）所以導致了下面的這個問題
關(guān)于var的

    const array = [1, 2, 3, 4, 5]
    function foo() {
      for (var index = 0; index < array.length; index++) {
        setTimeout(() => {
          console.log(index);
        }, 1000);
      }
    }
    foo()

看下輸出

關(guān)于let的

    const array = [1, 2, 3, 4, 5]
    function foo() {
      for (let index = 0; index < array.length; index++) {
        setTimeout(() => {
          console.log(index);
        }, 1000);
      }
    }
    foo()

看下輸出

因為var和let 在作用域上的差別，所以到這了上面的問題
使用var 定義變量的時候，作用域是在foo函數(shù)下，在for循環(huán)外部，在整個循環(huán)中是全局的，每一次的循環(huán)實際上是為index賦值，循環(huán)一次賦值一次，5次循環(huán)完成，index最后的結(jié)果賦值就為5；就是被最終賦值的index，就是5；
let的作用局的塊級作用局，index的作用域在for循環(huán)內(nèi)部，即每次循環(huán)的index的作用域就是本次循環(huán)，下一次循環(huán)重新定義變量index；所以index每次循環(huán)的輸出都不同
這里還有另外一個問題，setTimeout，這是一個異步，這就是我們今天要討論的

循環(huán)中的異步 setTimeout(func,time)函數(shù)運行機制

setTimeout(func,time)是在time（毫秒單位）時間后執(zhí)行func函數(shù)。瀏覽器引擎按順序執(zhí)行程序，遇到setTimeout會將func函數(shù)放到執(zhí)行隊列中，等到主程序執(zhí)行完畢之后，才開始從執(zhí)行隊列（隊列中可能有多個待執(zhí)行的func函數(shù)）中按照time延時時間的先后順序取出來func并執(zhí)行。即使time=0,也會等主程序運行完之后，才會執(zhí)行。

一個需求，一個數(shù)組array[1,2,3,4,5],循環(huán)打印，間隔1秒

上面的let是循環(huán)打印了12345，但是不是間隔1s打印的，是在foo函數(shù)執(zhí)行1s后，同時打印的

方式一放棄for循環(huán)，使用setInterval

    function foo(){
      let index = 0;
      const array = [1, 2, 3, 4, 5]

      const t = setInterval(()=>{
        if (index < array.length) {
          console.log(array[index]);
        }
        index++;
      }, 1000);

      if (index >= array.length) {
        clearInterval(t);
      }
    }
    foo()

我們上面說到，當for循環(huán)遇到了var，變量index的作用域在foo函數(shù)下，循環(huán)一次賦值一次，5次循環(huán)完成，index最后的結(jié)果賦值就為5；就是被最終賦值的index，就是5；

方式二，引入全局變量

代碼執(zhí)行順序是，先同步執(zhí)行for循環(huán)，再執(zhí)行異步隊列，在for循環(huán)執(zhí)行完畢后，異步隊列開始執(zhí)行之前，index經(jīng)過for循環(huán)的處理，變成了5。
所以我們引入一個全局變量j，使j在for循環(huán)執(zhí)行完畢后，異步隊列開始執(zhí)行之前，依然是0，在異步執(zhí)行時進行累加

    var j = 0;
    for (var index = 0; index < array.length; index++) {
      setTimeout(() => {
        console.log(j);
        j++;
      }, 1000 * index)
    }

方式三 for循環(huán)配合setTimeout（常規(guī)思路，不贅述，面試必備技能）

    const array = [1, 2, 3, 4, 5]
    function foo() {
      for (let index = 0; index < array.length; index++) {
        setTimeout(() => {
          console.log(index);
        }, 1000*index);
      }
    }
    foo()

方式四，通過閉包實現(xiàn)

開始討論方式四之前我推薦先閱讀一遍我之前寫過一篇文章
談一談javascript作用域
我們對上面的問題再次分析，for循環(huán)同步執(zhí)行，在for循環(huán)內(nèi)部遇到了setTimeout，setTimeout是異步執(zhí)行的，所以加入了異步隊列，當同步的for循環(huán)執(zhí)行完畢后，再去執(zhí)行異步隊列，setTimeout中有唯一的一個參數(shù)數(shù)index
方式三可行，是因為let是塊級作用域，每次for執(zhí)行都會創(chuàng)建新的變量index，for循環(huán)執(zhí)行完畢后，異步執(zhí)行之前，創(chuàng)建了5個獨立的作用域，5個index變量，分別是0，1，2，3，4，相互獨立，互不影響，輸出了預期的結(jié)果
如果說每次循環(huán)都會生成一個獨立的作用域用來保存index，問題就會得到解決，所以，我們通過閉包來實現(xiàn)

    const array = [1, 2, 3, 4, 5]

    function foo() {
      for (var index = 0; index < array.length; index++) {
        function fun(j) {
          setTimeout(function () {
            console.log(j);
          }, 1000 * j);
        }
        fun(index)
      }
    }
    foo()

setTimeout中的匿名回調(diào)函數(shù)中引用了函數(shù)fun中的局部變量j，所以當fun執(zhí)行完畢后，變量j不會被釋放，這就形成了閉包
當然我們可以對此進行一下優(yōu)化

    const array = [1, 2, 3, 4, 5]

    function foo() {
      for (var index = 0; index < array.length; index++) {
        (function(j) {
          setTimeout(function () {
            console.log(j);
          }, 1000 * j);
        })(index)
      }
    }
    foo()

將foo函數(shù)改為匿名的立即執(zhí)行函數(shù)，結(jié)果是相同的

總結(jié)

for循環(huán)本身是同步執(zhí)行的，當在for循環(huán)中遇到了異步邏輯，異步就會進入異步隊列，當for循環(huán)執(zhí)行結(jié)束后，才會執(zhí)行異步隊列
當異步函數(shù)依賴于for循環(huán)中的索引時（一定是存在依賴關(guān)系的，不然不會再循環(huán)中調(diào)動異步函數(shù)）要考慮作用域的問題，
在ES6中使用let是最佳的選擇，
當使用var時，可以考慮再引入一個索引來替代for循環(huán)中的索引，新的索引邏輯要在異步中處理
也可以使用閉包，模擬實現(xiàn)let
在實際開發(fā)過程中，循環(huán)調(diào)用異步函數(shù)，比demo要復雜，可能還會出現(xiàn)if和else判斷等邏輯，具體的我們下次再續(xù)

參考
通過for循環(huán)每隔兩秒按順序打印出arr中的數(shù)字
setTimeOut和閉包
《你不知道的JavaScript》上卷