深入浅出理解JavaScript高级定时器原理与用法


Posted in Javascript onAugust 02, 2018

本文实例讲述了JavaScript高级定时器原理与用法。分享给大家供大家参考,具体如下:

setTimeout()setInterval()可以用来创建定时器,其基本的用法这里就不再做介绍了。这里主要介绍一下javascript的代码队列。在javascript中没有任何代码是立即执行的,一旦进程空闲则尽快执行。所以说定时器中设置的时间并不代表执行时间就一定相符,而是代表代码会在指定时间间隔后加入到队列中进行等待。如果在这个时间点上,队列中没有其他东西,那么这段代码就会被执行,表面上看上去好像代码就在精确指定的时间点上执行了。所以就会产生一些问题。

重复定时器

通常,我们使用setInterval方法来以相同时间间隔重复执行某段代码。但是使用该方法会有两个问题:第一个就是某些间隔会被跳过;第二个就是多个定时器的代码执行之间的间隔可能会比预期的小。

在这里,我们来举个例子:如果某个onclick事件处理程序使用setInterval设置了一个200ms间隔的重复定时器,如果事件处理程序花了300ms的时间完成,就会跳过一个时间间隔同时运行着一个定时器代码。

我们也可以通过下面的代码来得到结论:

//重复定时器
var i =0;
setInterval(function(){
 //如果事件处理时间长于间隔时间
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
},100);
//可以明显感觉到时间间隔不相等

为了避免这种时间间隔的问题,我们可以采用链式调用setTimeout方法来取代setInterval

//可以采用链式调用setTimeout来取代setInterval
var i = 0;
setTimeout(function(){
 //处理内容
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
 //
 setTimeout(arguments.callee,100);
},100);
//这样处理效果明显好多了。

每次函数执行的时候都会创建一个新的定时器,第二个setTimeout调用使用了arguments.callee来获取对当前执行的函数的引用,并为其设置另外一个定时器。这样做是为了在前一个定时器代码执行完之前,不会向队列插入新的定时器代码,确保不会有任何缺失的间隔,也保证了在下一次定时器代码执行之前,至少要等待指定的间隔,避免了连续的运行。可谓一举两得,现在主流框架中的动画一般都是这样来实现重复定时的。

函数节流

定时器不仅仅是用来定时的,也可以用来缓解浏览器的压力。浏览器中某些计算和处理要比其他的昂贵很多,比如说DOM操作,就会需要更多的内存和CPU时间,连续使用过多的DOM操作可能会导致浏览器挂起,甚至崩溃。

函数节流的基本思想就是,某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置一个。目的就是为了在执行函数的请求停止一段时间后再执行。

代码如下:

//再来谈谈函数节流
function throttle(method,context){
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
 method.call(context);
 },100);
}
//该函数接受两个参数,第一个是要执行的函数,第二个是作用域。
//使用方法demo
//未使用情况:
window.onresize = function(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
//使用情况;
function resizeDiv(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
window.onresize = function(){
 throttle(resizeDiv);
};
//只要代码是周期性执行的,都应该使用节流。

这样给用户的感觉并不会很大,确是给浏览器减少了不少的压力。函数节流也是很多框架常用的技巧之一。

demo示例:

//重复定时器
/*var i =0;
setInterval(function(){
 //如果事件处理时间长于间隔时间
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
},100);*/
//可以明显感觉到时间间隔不相等
//可以采用链式调用setTimeout来取代setInterval
/*var i = 0;
setTimeout(function(){
 //处理内容
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
 //
 setTimeout(arguments.callee,100);
},100);*/
//这样处理效果明显好多了。
//以上就是重复定时器
//再来谈谈函数节流
function throttle(method,context){
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
 method.call(context);
 },100);
}
//该函数接受两个参数,第一个是要执行的函数,第二个是作用域。
//使用方法demo
//未使用情况:
window.onresize = function(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
//使用情况;
function resizeDiv(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
window.onresize = function(){
 throttle(resizeDiv);
};
//只要代码是周期性执行的,都应该使用节流。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
jquery对表单操作2
Apr 06 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
Javascript中replace()小结
Sep 30 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 #Javascript
Promise.all中对于reject的处理方法
Aug 01 #Javascript
详解es6超好用的语法糖Decorator
Aug 01 #Javascript
Vue Router去掉url中默认的锚点#
Aug 01 #Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 #Javascript
node.js遍历目录的方法示例
Aug 01 #Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 #Javascript
You might like
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
初识php MVC
2014/09/10 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
Sea.JS知识总结
2016/05/05 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Python3 中文文件读写方法
2018/01/23 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
python基础梳理(一)(推荐)
2019/04/06 Python
详解python调用cmd命令三种方法
2019/07/08 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
大学生最新职业生涯规划书范文
2014/01/12 职场文书
前处理组长岗位职责
2014/03/01 职场文书
会计岗位职责模板
2014/03/12 职场文书
小学生安全演讲稿
2014/04/25 职场文书
自主招生推荐信范文
2014/05/10 职场文书
施工安全协议书范本
2014/09/26 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
2015中学学校工作总结
2015/07/20 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python
解决MySQL报“too many connections“错误
2022/04/19 MySQL