for循环+setTimeout的延迟操作

2018-11-27 08:28:57来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

例子:

1 for (var i = 0; i < 5; i++) {
2     setTimeout(function () {
3         console.log(i);
4     }, 100)
5 }

上述代码,输出结果显而易见是5个5,且并没有任何的延迟效果。那么为什么呢?

       首先这样的结果需要从JS的执行机制说起。JS是单线程环境,也就是说代码的执行是从上到下,依次执行。这样的执行称为同步执行。因为种种不要浪费和节约的原因。JS中引进了异步的机制。在这段代码中,哪个是同步哪个是异步呢?for循环是同步代码,而setTimeout中的是异步代码。那么JS碰到这个有同步和异步的情况下会先从上到下执行同步代码,碰到异步的代码会将其插入到任务队列当中等待。而setTimeout是延时,也就是说碰到setTimeout这个异步的代码块会根据它里面的第二个参数:延时时间来将代码插入到任务队列当中,比如上面这段代码中,第二个参数延时时间是100,也就是说执行到它的时候会在100ms之后将它插入到任务队列当中。同步代码都执行完成之后,那么JS引擎就空闲了,这个时候就轮到任务队列中的异步代码依次加载了。
      这是上面这段代码的答案的一半。另一半就来自于作用域,作用域是变量等资源的作用范围。在这段代码中准确的说是作用域链的问题,当同步代码执行完毕开始执行异步的setTimeout代码时,setTimeout中需要一个变量i,而执行的时候在当前的作用域中开始找,找不到变量i的定义,这个时候就把创建这个函数的作用域作为当前作用域,再次寻找,创建这个函数的作用域就是全局作用域,也就是找到了for循环中i,找到了之后就结束寻找变量i的行程。由于这个时候的i是全局的,而且人家已经变为了最终形态:5,setTimeout找到的就是这个i=5;所以就输出了5,下面的4次setTimeout 的执行都是类似,所以结果都是5;
所以我对这个答案的理解归结起来就是  异步加载+作用域链。

正确写法:

1 for (var i = 0; i < 5; i++) {
2     (function (i) {
3         setTimeout(function () {
4             console.log(i);
5         }, 100 * i);
6     })(i);
7 }

将延迟操作闭包,立即执行。

     

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:页面中多个script块之间方法与变量共享问题

下一篇:js replace替换字符串,同时替换多个方法