定时器并不能保证真正定时执行,一般会延迟一点,但是也有可能延迟很长时间
如下例
document.querySelector('button').onclick = function(){
var start = Date.now()
console.log('启动定时器前')
setTimeout(function(){
console.log('定时器执行了',Date.now()-start)
},200)
console.log('启动定时器后...')
}
可以看到定时器并不一定按照我们设定的时间去执行,而是有一定的延迟,不过这个延迟我们还能接受
上面说到定时器也可能延迟很长时间
document.querySelector('button').onclick = function(){
var start = Date.now()
console.log('启动定时器前')
setTimeout(function(){
console.log('定时器执行了',Date.now()-start)
},200)
console.log('启动定时器后...')
//做一个时间的工作
for(var i = 0;i<1000000000;i++){
}
}
为什么? 首先定时器的回调函数是在主线程执行的,所有的js代码都是在主程序执行。 之所以延迟执行是因为for
它的运行机制是先执行初始化代码(也包含设置定时器、绑定监听、发送ajax)在执行回调代码,因此要等初始化代码执行完毕后在设置定时器,所以看到上面的延迟 问题。
浏览器运行先执行初始化代码,当发现有定时器,事件监听时,将函数进行绑定并存储到回调队列里面,此时还没有执行。当初始化代码执行完毕后从任务队列中循环取出回调函数放入执行栈中进行处理(一个接一个)