无为清净楼资源网

详解javascript高级定时器
网络编程 2024/11/20 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

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,定时器
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接