深入探寻javascript定时器
javascript单线程
JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。
队列任务
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。
异步事件驱动
浏览器中很多行为是异步(Asynchronized)的,例如:鼠标点击事件、窗口大小拖拉事件、定时器触发事件、XMLHttpRequest完成回调等。当一个异步事件发生的时候,它就进入事件队列。浏览器有一个内部大消息循环,EventLoop(事件循环),会轮询大的事件队列并处理事件。例如,浏览器当前正在忙于处理onclick事件,这时另外一个事件发生了(如:windowonSize),这个异步事件就被放入事件队列等待处理,只有前面的处理完毕了,空闲了才会执行这个事件。
EventLoop
JavaScript是单线程的,但浏览器不是单线程的
浏览器至少会有以下一些进程
1.浏览器GUI渲染线程
2.JavaScript引擎线程
3.浏览器定时触发器线程
4.浏览器事件触发线程
5.浏览器http异步请求线程
因为JavaScript引擎是单线程的,所以代码都是先压到队列,然后由引擎采用先进先出的方式运行。事件处理函数、timer执行函数也会排到这个队列中,然后利用一个无穷回圈,不断从队头取出函数执行,这个就是EventLoop。
总结一句话,js是单线程的,但是浏览器是多线程的,遇到异步的东西都是由浏览器把异步的回调放到EventLoop中,js线程不繁忙的时候,再去读取EventLoop
定时器原理
定时器的用法
setTimeout(fn,delay)
setInterval(fn,delay)
fn是函数也可以是字符串,delay是延迟的时间,单位是毫秒
有以下要注意的
1.fn虽然可以是字符串,但是一直都不推荐这么使用
2.fn里面的函数如果有this,执行的时候this会指向到window上面去
如果理解好了js单线程和Eventloop,定时器的原理也很好理解了
如果设置了定时器,当到了延迟时间,浏览器会把延迟执行的事件放到Eventloop里面,当时间到了,如果js线程空闲就会执行了(所以定时器的精度不准啊)
看有文章介绍说setTimeout和setInterval对函数一直轮询的区别,代码如下
setTimeout(function(){ setTimeout(arguments.callee,100) },100) setInterval(function(){},1000)
文章大概的意思是setTimeout是在回调函数执行后才启动下一次定时器,所以肯定是有间隔的执行,而setInterval是一直都在执行,如果碰到了js线程一直执行,可能就会在Eventloop里面加多个回调,当js线程不忙的时候,会一下子执行多个
经过测试发现无论在ie,ff,chrome,Opera,Safari下,setInterval都是按一定间隔来的
测试代码如下
setInterval(function(){ xx.innerHTML=xx.innerHTML+1; },100); for(vari=0;i<6000000;i++){ xx.offsetWidth }
setTimeout(function(){ debugger; },10)