深入探寻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 class="wrap" >
<div id="a1" class="c">0</div>
<div id="a2" class="c">0</div>
<div id="a3" class="c">0</div>
<div id="a4" class="c">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/Jquery——简单定时器的多种实现方法
第一种方法: 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x
-
js定时器(执行一次、重复执行)
1,只执行一次的定时器 复制代码 代码如下: <script> //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 window.clearTimeout(t1);//去掉定时器 </scrip
-
javascript中SetInterval与setTimeout的定时器用法
示例一: 查看演示 下载源码 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.也就是说setTimeout()只执行一次,setInterval()可以执行多次.两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数. setTimeOut用法 setTimeout函数的用法如下: var timeoutID = window.setTi
-
JS中自定义定时器让它在某一时刻执行
有时,处于需求的原因,我们需要在JS中写一个方法,然后让它在某一时刻执行,即需要在JS中写一个定时器,当时间达到要求时间时,需要执行的方法自动执行,下面小编简单说一下我是怎么实现的 var tMinutes=0; var tHours=0; var go; function dingshi(hours,minutes){ tHours = hours; tMinutes = minutes; go=setInterval(run,3000); } function run(){ var date
-
js定时器的使用(实例讲解)
在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime);2.循环定时器:timename=setInterval("function();",delaytime); 第一个参数"function()"是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用":"隔开即可.比如要弹出两个警告窗口,便可将
-
详解javascript高级定时器
setTimeout()和setInterval()可以用来创建定时器,其基本的用法这里就不再做介绍了.这里主要介绍一下javascript的代码队列.在javascript中没有任何代码是立即执行的,一旦进程空闲则尽快执行.所以说定时器中设置的时间并不代表执行时间就一定相符,而是代表代码会在指定时间间隔后加入到队列中进行等待.如果在这个时间点上,队列中没有其他东西,那么这段代码就会被执行,表面上看上去好像代码就在精确指定的时间点上执行了.所以就会产生一些问题. 重复定时器 通常,我们使用set
-
获取焦点时,利用js定时器设定时间执行动作
进入正题,先说说定时器. 在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime); 2.循环定时器:timename=setInterval("function();",delaytime); 第一个参数"function()"是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用":"隔开即可.比
-
理解javascript定时器中的setTimeout与setInterval
一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 setTimeout: var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]); var timeoutID = window.setTimeout(code, delay); timeoutID 是该延时操作的数字ID,
-
JavaScript定时器详解及实例
JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象 SetInterval为自动重复,setTimeout不会重复. clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象)
-
理解javascript定时器中的单线程
一.JavaScript 引擎是单线程的 可以从下面的代码中看到,第一个用setTimeout中的代码是死循环,由于是单线程,下面的两个定时器就没机会执行了. <script type="text/javascript"> setTimeout( function(){ while(true){} } , 100); setTimeout( function(){ alert('你好!setTimeout'); } , 200); setInterval( function
-
浅谈Node.js中的定时器
Node.js中定时器的实现 上一篇博文提到,在Node中timer并不是通过新开线程来实现的,而是直接在event loop中完成.下面通过几个JavaScript的定时器示例以及Node相关源码来分析在Node中,timer功能到底是怎么实现的. JavaScript中定时器功能的特点 无论是Node还是浏览器中,都有setTimeout和setInterval这两个定时器函数,并且其工作特点基本相同,因此下面仅以Node为例进行分析. 我们知道,JavaScript中的定时器并不同于计算机
-
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
废话不多说了,直接给大家贴代码了. // 每隔五秒定时刷新当前窗口 setTimeout("self.location.reload();",5000); //js 定时关闭窗口(ie和FF中测试过) //6秒后自动关闭当前窗口 setTimeout("window.opener=null;window.close()",6000); 下面给大家介绍下javascript定时器使用 使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方
-
JavaScript定时器实现的原理分析
JavaScript中的定时器大家基本在平时的开发中都遇见过吧,但是又有多少人去深入的理解其中的原理呢?下面我们就来分析一下定时器的实现原理. 一.储备知识 在我们在项目中一般会遇见过这样的两种定时器,第一种是setTimeOut,第二种是setInterval,这两种定时器有如下的区别: 1.setTimeout允许设置一个超时对象,超时后执行这个对象,但是只执行一次,无周期 2.setInternval允许设置一个超时对象,超时后执行这个对象,周期等于超时对象指定的时间,周期为无限循环 举一