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)
}

就实现了想要的效果。