深入探寻javascript定时器_Javascript教程-查字典教程网
深入探寻javascript定时器
深入探寻javascript定时器
发布时间:2016-12-30 来源:查字典编辑
摘要:javascript单线程JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及...

javascript单线程

JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。

队列任务

单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。

异步事件驱动

浏览器中很多行为是异步(Asynchronized)的,例如:鼠标点击事件、窗口大小拖拉事件、定时器触发事件、XMLHttpRequest完成回调等。当一个异步事件发生的时候,它就进入事件队列。浏览器有一个内部大消息循环,Event Loop(事件循环),会轮询大的事件队列并处理事件。例如,浏览器当前正在忙于处理onclick事件,这时另外一个事件发生了(如:window onSize),这个异步事件就被放入事件队列等待处理,只有前面的处理完毕了,空闲了才会执行这个事件。

Event Loop

JavaScript是单线程的,但浏览器不是单线程的

浏览器至少会有以下一些进程

1.浏览器 GUI 渲染线程

2.JavaScript 引擎线程

3.浏览器定时触发器线程

4.浏览器事件触发线程

5.浏览器 http 异步请求线程

因为 JavaScript 引擎是单线程的,所以代码都是先压到队列,然后由引擎采用先进先出的方式运行。事件处理函数、timer 执行函数也会排到这个队列中,然后利用一个无穷回圈,不断从队头取出函数执行,这个就是Event Loop。

总结一句话,js是单线程的,但是浏览器是多线程的,遇到异步的东西都是由浏览器把异步的回调放到Event Loop中,js线程不繁忙的时候,再去读取Event Loop

定时器原理

定时器的用法

setTimeout(fn, delay)

setInterval(fn, delay)

fn是函数也可以是字符串,delay是延迟的时间,单位是毫秒

有以下要注意的

1.fn虽然可以是字符串,但是一直都不推荐这么使用

2.fn里面的函数如果有this,执行的时候this会指向到window上面去

如果理解好了js单线程和Event loop,定时器的原理也很好理解了

如果设置了定时器,当到了延迟时间,浏览器会把延迟执行的事件放到Event loop里面,当时间到了,如果js线程空闲就会执行了(所以定时器的精度不准啊)

看有文章介绍说setTimeout和setInterval对函数一直轮询的区别,代码如下

复制代码 代码如下:

setTimeout(function(){

setTimeout(arguments.callee,100)

},100)

setInterval(function(){},1000)

文章大概的意思是setTimeout是在回调函数执行后才启动下一次定时器,所以肯定是有间隔的执行,而setInterval是一直都在执行,如果碰到了js线程一直执行,可能就会在Event loop里面加多个回调,当js线程不忙的时候,会一下子执行多个

经过测试发现无论在ie,ff,chrome,Opera,Safari下,setInterval都是按一定间隔来的

测试代码如下

复制代码 代码如下:

setInterval(function(){

xx.innerHTML=xx.innerHTML+1;

},100);

for(var i=0;i<6000000;i++){

xx.offsetWidth

}

setTimeout(function(){

debugger;

},10)

断点的时候还是只打印出了1个1

定时器的精度问题

因为js单线程原因,如果遇到繁忙,定时器肯定不准,而且肯定是越来越长的,这个好像无解啊,无解啊

还有一个精度问题就是最小间隔setTimeout(fun,0)

在js线程不忙的时候,也不可能0秒后马上执行,总有个最小间隔,每个浏览器还各不一样,这个未做测试

我看一篇文章中说的是w3c的标准,定时器的最小时间执行是4ms,找不到出处无从考证呀!!!

定时器相关的一些优化

在做定时器的时候还是可以有一些优化的

1.比如如果绑定window.onresize,在浏览器缩放的时候,该触发的非常频繁,所以可以延迟执行,当下次执行到的时候clear掉,减少频繁执行

伪代码如下

复制代码 代码如下:

var timer;

function r(){

clearTimeout(timer);

timer = setTimeout(function(){

//do something

},150);

}

2.在滚动条往下拉的时候也是一下,比如图片的lazyload,也应该有一个定时器,避免过多的计算

3.当有多个地方需要定时器的时候,可以合并成一个定时器,时间间隔以最小的那个为准,然后需要执行的回调函数往数组里面塞,当到了时间间隔,遍历数组执行即可

一个小demo

复制代码 代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<style>

.wrap{width:80%; margin: 30px auto; border: 1px solid #ccc; padding: 20px;}

.c{border: 1px solid #ccc; height: 30px;margin-bottom: 20px;}

</style>

</head>

<body>

<div id="xx"></div>

<div >

<div id="a1">0</div>

<div id="a2">0</div>

<div id="a3">0</div>

<div id="a4">0</div>

</div>

<script src="http://static.paipaiimg.com/paipai_h5/js/ttj/zepto.min.js"></script>

<script type="text/javascript">

var runTime = {

options : {

step : 1000

},

callbacks:[],

addCallbacks : [],

start : false,

timer : null,

extend : function(){

var target = arguments[0] || {}, i = 1, length = arguments.length, options;

if ( typeof target != "object" && typeof target != "function" )

target = {};

for ( ; i < length; i++ )

if ( (options = arguments[ i ]) != null )

for ( var name in options ) {

var copy = options[ name ];

if ( target === copy )

continue;

if ( copy !== undefined )

target[ name ] = copy;

}

return target;

},

init : function(options){

$.extend(this,this.options,options||{});

},

add : function(fun,options){

options = options ||{};

this.addCallbacks.push({

fun : fun,

startTime : new Date().getTime(),

step : options.step || this.step,

i : 1

});

var self = this;

if(!this.start){

this.callbacks = [fun];

this.start = true;

this.startTime = new Date().getTime();

this.timer = setInterval(function(){

self.done();

},this.step);

}

},

done : function(){

var callbacks = this.callbacks,

self = this,

newArr = [];

$.each(callbacks,function(i,obj){

if(obj.step == self.step){

obj.fun();

}else{

if(obj.i == obj.step/self.step){

if((new Date().getTime())-obj.startTime>obj.step*2/3){

obj.fun();

}

obj.i = 1;

}else{

obj.i = obj.i + 1;

}

}

});

$.each(this.addCallbacks,function(i,obj){

if(obj.step == self.step){

if((new Date().getTime())-obj.startTime>obj.step*2/3){

obj.fun();

callbacks.push(obj);

}else{

newArr.push(obj);

}

}else{

obj.i = obj.i + 1;

callbacks.push(obj);

}

});

this.addCallbacks = newArr;

},

clear : function(){

clearInterval(this.timer);

}

}

runTime.init();

runTime.add(function(){

a1.innerHTML = ~~a1.innerHTML+1;

});

runTime.add(function(){

a2.innerHTML = ~~a2.innerHTML+1;

},{step:2000});

runTime.add(function(){

a3.innerHTML = ~~a3.innerHTML+1;

},{step:4000});

runTime.add(function(){

a4.innerHTML = ~~a4.innerHTML+1;

},{step:8000});

</script>

</body>

</html>

小伙伴们是否对javascript定时器有所了解了呢,如有疑问给我留言吧。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类