var 在异步中引发的 bug

Posted Piers

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的主要内容,如果未能解决你的问题,请参考以下文章

Java中list集合的clean()方法滥用引发的bug

为啥代码片段在 matplotlib 2.0.2 上运行良好,但在 matplotlib 2.1.0 上引发错误

未捕获异步方法中引发的异常 - 为啥?

vscode代码片段建议bug

jquery slide动画引发的bug解决方法

我的踩坑之旅-跨域问题引发bug