for 循环执行机制

2019-03-04  本文已影响0人  练习时长2年半的个人练习生

由于浏览器是事件驱动的(Event driven),因此浏览器中很多行为是异步(Asynchronized)的,很容易有事件被同时或者连续触发。当异步事件发生时,会创建事件并放入执 行队列中,等待当前代码执行完成之后再执行这些代码,如鼠标点击事件发生、定时器触发事件发生、XMLHttpRequest完成回调这些事件,都会被放 入执行队列中等待。

下面看这个例子

for(var i=0;i<3;i++){
    setTimeout(function(){
        console.log(i);
    }, (i+1)*1000); 
}
//执行结果为3 3 3 

而实际上,这段代码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的时候才不满足。

for循环的表达式一般如下:
for(表达式1;表达式2;表达式3){
    表达式4;
}

执行的顺序为:
1)第一次循环,即初始化循环。
首先执行表达式1(一般为初始化语句),再执行表达式2(一般为条件判断语句),判断表达式1是否符合表达式2的条件,如果符合,则执行表达式4,否则,停止执行,最后执行表达式3.
2)下次的循环:
首先执行表达式2,判断表达式3是否符合表达式2的条件;如果符合,继续执行表达式4,否则停止执行,最后执行表达式3.如果往复,直到表达式3不再满足表达式2的条件。

总结:总的来说,执行顺序是一致的,先进行条件判断(表达式2),再执行函数体(表达式4),最后执行表达式3。如此往复,区别在于,条件判断的对象,在第一次判断时,是执行表达式1,初始化对象,后续的判断对象是执行后的结果(表达式3)

上一篇 下一篇

猜你喜欢

热点阅读