zqifa的博客

我不管,反正我最萌~

js中for循环实现sleep阻塞机制

js中for循环实现sleep阻塞,一开始写法:

for(var i=0;i<a.length;i++){
    var id_value = a[i];
    var typeid =$("#aid_"+id_value).data('typeid');
    if ((i+1) == a.length){
        last = true;
    }
    sleep(500)
}

那js怎么解决事件阻塞呢?

关于js的阻塞机制,可以看下面一段代码,一般,我们会认为,这段代码会log出来0,1,2

for(var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, (i + 1) * 1000);
}

而实际上,这段代码log出来的结果是 3,3,3。这是js新手很容易遇到的问题,具体原因就是因为for循环的阻塞机制。在上面的代码中,setTimeout这个定时器需要等待for循环 执行完成,而for循环执行完成了之后,i已经为3了,此时才开始执行setTimeout,因此console.log(i)会是3。

至于为什么i会是3,请回顾一下for循环的执行顺序,当i为2的时候,满足循环条件,执行代码块,然后i++,此时i为3,不满足循环条件,不执行代码块,循环停止。

对于for循环,记住,是在不满足条件的情况下停止循环,对于以上代码,可以看出,i=3的时候才不满足。

其实,阻塞作为js引擎的处理方式,我们最好不要想着解决“阻塞”,而是让我们想执行的代码,插入到“主线程”中。这么说比较不易理解,还是以上面的代码为例,直接上代码好了

for(var i = 0; i < 3; i++) {
    (function(i) {
        setTimeout(function() {
            console.log(i);
        }, (i + 1) * 1000);
    })(i)
}

再上面的代码中,我们加了一个立即执行的匿名函数,并且将for循环的i作为实参传入进去。这样,setTimeout就会被立即执行,而不会等待(这里不太了解细节,就不多说了,大概猜测为新开了一个临时的线程,立即执行匿名函数,然后再立即切换回来)。

根据这个原理,修改代码如下:

for(var i=0;i<a.length;i++){
    var id_value = a[i];
    var typeid =$("#aid_"+id_value).data('typeid');
    if ((i+1) == a.length){
        last = true;
    }
    (function (i,id_value,typeid,last){
        setTimeout(function (){
            up_html(id_value,typeid,last);
        },(i+1)*500)
    })(i,id_value,typeid,last)
}

就实现了想要的效果。

作者:zqifa

出处:https://www.l1mn.com

原文地址:https://www.l1mn.com/p/2ho4i2.html

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

公告

昵称:zqifa

站龄: 3年10个月

博客持续完善ing,敬请期待...

打滚求打赏(๑ ̄ ̫  ̄๑)

此处弱弱求打赏~~万一有好心人呢~~

支付宝酱

支付宝赞助

微信酱

微信赞助

随笔分类

php(110)

linux(63)

python(44)

web前端(39)

js(35)

服务器(33)

mysql(30)

html(24)

docker(23)

windows(22)

centos(22)

django(20)

前端设计(18)

git(16)

常用软件(14)

数据库(14)

算法(14)

字符编码(13)

编程进阶(13)

笔记(12)

更多

我的标签

php(106)

linux(47)

python(45)

js(34)

mysql(30)

centos(28)

web前端(23)

docker(22)

windows(22)

django(20)

更多

相册

Copyright © zqifa 联系方式:z___qf@163.com