详解javascript高级定时器


Posted in Javascript onDecember 31, 2015

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);
};
//只要代码是周期性执行的,都应该使用节流。

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

以上就是关于javascript高级定时器的相关介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
解析javascript 实用函数的使用详解
May 10 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
关于element的表单组件整理笔记
Feb 05 Javascript
jQuery动画效果相关方法实例分析
Dec 31 #Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 #Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 #Javascript
jQuery语法小结(超实用)
Dec 31 #Javascript
解决JS无法调用Controller问题的方法
Dec 31 #Javascript
简单谈谈JavaScript的同步与异步
Dec 31 #Javascript
jQuery实现简单的图片查看器
Sep 11 #Javascript
You might like
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
python3中for循环踩过的坑记录
2020/12/14 Python
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
秋季运动会加油稿200字
2014/01/11 职场文书
精彩的广告词
2014/03/19 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
重阳节活动总结
2014/08/27 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
Python 语言实现六大查找算法
2021/06/30 Python