首页 > 代码库 > var 在异步中引发的 bug

var 在异步中引发的 bug

问题复现

for (var i = 0; i < 10; i++) {
    $http.get("/uri").then(function(data)){
        mydata[i].data = data;
    }
}

报错:

unable to get property ‘mydata‘ of null

 

问题原因

第一步,听说 var 和 let 作用域范围不同,所以特定尝试下 let,看是否能解决这个 bug。

for (let i = 0; i < 10; i++) {
    $http.get("/uri").then(function(data)){
        mydata[i] = data;
    }
}

的确没有报错,解决了该 bug。

第二步,在 console 中输出 i 值:发现 var i 时,所有的 i 为 10;let i 时,i 分别为 1 2 3 4 5 6 7 8 9。

 

后来查阅资料弄清楚该 bug 的原因:

  1. JavaScript 为单线程,异步操作是在所有操作是在主程序结束之后才开始运行。首先是提交所有的 AJAX 操作,其次才是分别执行所有的 AJAX 请求。
  2. var 为全局变量,let 为块级变量。当 AJAX 操作执行时,var i 的 i 由于是全局变量已经变成了 10,自然越界了;let i 的 i 由于是块级变量,还保持块中的值,分别为 1 2 3 4 5 6 7 8 9,所以不会越界。

其实,这也是 let 产生的原因。

 

var 在异步中引发的 bug