微信小程序中的循環遍歷問題

比如：如果在微信小程序中要遍歷輸出 0-9 的數，我們會使用for循環

for(var i=0;i<10;i++){
      console.log(i);
    }

確實結果也是這樣：

但是，如果我在循環時同時調用wx的api接口10次，那么輸出的結果就會不同（這是產生了閉關的效應）

eg：每次調用一次wx.showToast()接口,並在成功時輸出循環的值。

for(var i=0;i<10;i++){
      wx.showToast({
        title: 'haha',
        success:function(){
          console.log(i);
        }
      })
    }

結果：

可以看到輸出了10次10，這是因為i自變量的作用域范圍，在這里它相當於全局變量。

兩種解決辦法：

1.使用臨時函數

　

for(var i=0;i<10;i++){
      (function(j){
        wx.showToast({
          title: 'haha',
          success: function () {
            console.log(j);
          }
        })
      })(i);
    }

以上代碼同：

for(var i=0;i<10;i++){
      function temp(j){
        wx.showToast({
          title: 'haha',
          success: function () {
            console.log(j);
          }
        })
      };
      temp(i);
    }
  },

結果：

2.使用ES6中let的塊作用域（推薦）

for(let i=0;i<10;i++){
      wx.showToast({
        title: 'haha',
        success: function () {
          console.log(i);
        }
      })
    }

結果同上。

但是如果將let i定義在函數外部，則對於循環來說還是相當於全局變量

let i;
    for(i=0;i<10;i++){
      wx.showToast({
        title: 'haha',
        success: function () {
          console.log(i);
        }
      })
    }

結果還是：