js中setTimeout(fn,0) 作用分析

责编:menVScode 2018-01-23 23:56 阅读(583)

        例子1

for(var i=0;i<10;i++){  
    setTimeout(function(){  
        console.log(i);  
    },0);  
}  

        上述代码中,setTimeout是定时器,但是其中0秒该如何理解呢?

        首先当script脚本加载完成了之后,setTimeout才会执行注册的函数,每个for循环都会执行一次setTimeout函数,并且第二个参数为0,就是说等脚本执行完毕,会有10个function依次执行,那么每次function都会打印i,且i值即为10,所以会打印出10个10来。

        例子2

function a() {  
  setTimeout( function(){  
    alert(1)  
  }, 0);  
  alert(2);  
}  
a();  

        代码中的 setTimeout 设为 0,也就是延迟 0ms,看上去是不做任何延迟立刻执行,即依次弹出 “1”、“2”。但实际的执行结果确是 “2”、“1”。其中的原因得从 setTimeout 的原理说起:

        JavaScript 是单线程执行的,也就是无法同时执行多段代码,当某一段代码正在执行的时候,所有后续的任务都必须等待,形成一个队列,一旦当前任务执行完毕,再从队列中取出下一个任务。这也常被称为 “阻塞式执行”。所以一次鼠标点击,或是计时器到达时间点,或是 Ajax 请求完成触发了回调函数,这些事件处理程序或回调函数都不会立即运行,而是立即排队,一旦线程有空闲就执行。假如当前 JavaScript 进程正在执行一段很耗时的代码,此时发生了一次鼠标点击,那么事件处理程序就被阻塞,用户也无法立即看到反馈,事件处理程序会被放入任务队列,直到前面的代码结束以后才会开始执行。如果代码中设定了一个 setTimeout,那么浏览器便会在合适的时间,将代码插入任务队列,如果这个时间设为 0,就代表立即插入队列,但不是立即执行,仍然要等待前面代码执行完毕。所以setTimeout 并不能保证执行的时间,是否及时执行取决于 JavaScript 线程是拥挤还是空闲。

        例子3

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

        分析:由于JavaScript是单线程执行的,因此在for循环执行的时候,setTimeout函数没有立即执行,而是在队列中等待for循环结束。for循环循环了三次,队列中等待执行的setTimeout函数就有三个。当for循环结束后,i 的值就为3了,j 的值也为3了,然后再执行setTimeout函数,因此例子3最终的打印结果为:3 3 3 3 3 3。

        例子4

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

        分析:原因同例子3,for循环结束后,i 的值为3,然后在依次执行setTimeout函数,定时器函数内部的也依次加1,所以例子4的打印结果为:0,3 1,3 2,3。


标签: setTimeout js
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码