深入探寻javascript定时器


Posted in Javascript onJanuary 02, 2015

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的高性能TreeView(asp.net)
Feb 23 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
javascript 回调函数详解
Nov 11 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 #Javascript
JavaScript中的null和undefined区别介绍
Jan 01 #Javascript
JavaScript中的全局对象介绍
Jan 01 #Javascript
原生javascript获取元素样式
Dec 31 #Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 #Javascript
jQuery中:last-child选择器用法实例
Dec 31 #Javascript
jQuery中:nth-child选择器用法实例
Dec 31 #Javascript
You might like
php中执行系统命令的方法
2015/03/21 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
JS重要知识点小结
2011/11/06 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
canvas的神奇用法
2017/02/03 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
动态创建类实例代码
2009/10/07 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
高三高考决心书
2014/03/11 职场文书
学校募捐倡议书
2014/05/14 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
横空出世观后感
2015/06/09 职场文书
如何写观后感
2015/06/19 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android
教你nginx跳转配置的四种方式
2022/07/07 Servers