源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

深入探寻javascript定时器

  • 时间:2022-11-17 14:30 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:深入探寻javascript定时器
[b]javascript单线程[/b] JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。 [b]队列任务[/b] 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。 [b] 异步事件驱动[/b] 浏览器中很多行为是异步(Asynchronized)的,例如:鼠标点击事件、窗口大小拖拉事件、定时器触发事件、XMLHttpRequest完成回调等。当一个异步事件发生的时候,它就进入事件队列。浏览器有一个内部大消息循环,Event Loop(事件循环),会轮询大的事件队列并处理事件。例如,浏览器当前正在忙于处理onclick事件,这时另外一个事件发生了(如:window onSize),这个异步事件就被放入事件队列等待处理,只有前面的处理完毕了,空闲了才会执行这个事件。 [b]Event Loop[/b] JavaScript是单线程的,但浏览器不是单线程的 浏览器至少会有以下一些进程 1.浏览器 GUI 渲染线程 2.JavaScript 引擎线程 3.浏览器定时触发器线程 4.浏览器事件触发线程 5.浏览器 http 异步请求线程 因为 JavaScript 引擎是单线程的,所以代码都是先压到队列,然后由引擎采用先进先出的方式运行。事件处理函数、timer 执行函数也会排到这个队列中,然后利用一个无穷回圈,不断从队头取出函数执行,这个就是Event Loop。 总结一句话,js是单线程的,但是浏览器是多线程的,遇到异步的东西都是由浏览器把异步的回调放到Event Loop中,js线程不繁忙的时候,再去读取Event Loop [b]定时器原理[/b] [b]定时器的用法[/b] setTimeout(fn, delay) setInterval(fn, delay) fn是函数也可以是字符串,delay是延迟的时间,单位是毫秒 有以下要注意的 1.fn虽然可以是字符串,但是一直都不推荐这么使用 2.fn里面的函数如果有this,执行的时候this会指向到window上面去 如果理解好了js单线程和Event loop,定时器的原理也很好理解了 如果设置了定时器,当到了延迟时间,浏览器会把延迟执行的事件放到Event loop里面,当时间到了,如果js线程空闲就会执行了(所以定时器的精度不准啊) 看有文章介绍说setTimeout和setInterval对函数一直轮询的区别,代码如下
[url=http://static.paipaiimg.com/paipai_h5/js/ttj/zepto.min.js"></script]http://static.paipaiimg.com/paipai_h5/js/ttj/zepto.min.js"></script[/url]>     <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定时器有所了解了呢,如有疑问给我留言吧。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部