JavaScript定时器
来源:互联网 发布:五子棋游戏c语言代码 编辑:程序博客网 时间:2024/04/29 14:14
转载地址:http://www.cnblogs.com/yangjunhua/archive/2012/04/12/2444106.html
一、setTimeout
setTimeout(function(){ //要执行的代码 },200);
理解:指隔200ms后,定时器代码被添加到队列中,等待JavaScript进程空闲后,代码才执行
二、setInterval
setInterval(function(){ //要执行的代码 },200);
A、理解:
1、上面代码是指每隔200ms就创建一个执行代码的定时器
2、当使用setInterval时,仅当(在队列中)没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中,引用JavaScript高级程序设计第二版书中语句
(即:当前一个定时器代码执行时,紧跟后面的第一个定时器代码将添加到队列中,等待执行,再后面的定时器代码不会添加到队列中)
B、问题:
当定时器代码执行时间(假如需要600ms才执行完)超过指定间隔(这里是200ms),那么某些定时器代码就会被跳过(即后面的定时器代码不会被添加到队列中),
前一个定时器代码执行完毕后,队列中的定时器代码立刻执行,各定时器之间的代码执行没有间隔
C、解决方法:
使用链式setTimeout,如:
setTimeout(function(){ //要执行的代码 setTimeout(arguments.callee,200);},200);
这样做的好处是:前一个定时器要执行的代码执行完且等待200ms后,才创建一个新的定时器,并把定时器代码添加到队列中执行
即:不会出现定时器代码被跳过的情况;定时器之间的代码执行可以有间隔(根据自己设置)
D、实际应用:
1、javascript脚本会阻塞浏览器处理其他事件,如与用户的交互,如果一段js脚本运行的时间过长,那么我们可以使用js定时器,腾出空闲,避免用户等过长时间
2、理解函数节流
函数节流:指某些代码不可以在没有间断的情况下连续执行
看下面代码:
window.onresize = function(){ console.log(document.documentElement.clientHeight);}//在resize事件处理程序结束之前,一直输出着浏览器视口高度
当你在调整浏览器窗口大小时,resize事件处理程序中代码就一直在运行着
改进代码:
var timeoutId = null;window.onresize = function(){ clearTimeout(timeoutId); timeoutId = setTimeout(function(){ console.log(document.documentElement.clientHeight); },100);}封装以后的改进代码:
function cHeight(){ console.log(document.documentElement.clientHeight);}function throttle(method,context){ clearTimeout(method.tId); method.tId = setTimeout(function(){ method.call(context); },100);}window.onresize = function(){ throttle(cHeight); } //在resize事件处理程序结束后,等待100ms后代码添加到队列中执行,只输出最后一个定时器代码结果,浏览器不会在极短的时间内进行过多的计算
在resize事件没有结束之前clearTimeout(timeoutId);和定时器一样一直在执行的,目的是清除在100ms内创建的定时器。给页面上的其他交互留出时间。
- javascript定时器
- javascript 定时器
- JavaScript定时器
- javascript定时器
- javascript 定时器
- javascript 定时器
- JavaScript定时器
- javascript 定时器
- javascript定时器
- JavaScript定时器
- JavaScript定时器
- javascript 定时器
- JavaScript定时器
- javascript定时器
- JavaScript定时器
- javascript定时器
- Javascript 定时器
- javascript 定时器
- 自学日语第一天,第一课。
- 通向架构师的道路(第二十三天)maven与ant的奇妙整合
- jQuery选择器-WEB自动化测试提速之利剑
- 求两个已序数组的中位数
- fatal error C1189错误
- JavaScript定时器
- [小说]魔王冢(49)登徒子
- ort_tasks.c
- L4 Fiasco调度结构
- 通向架构师的道路(第二十四天)之Oracle性能调优-朝拜先知之旅
- 使用HQL查询符合条件的前n行语句
- 求助
- 小菜鸟学 Spring-bean scope (一)
- 通向架构师的道路(第二十五天)SSH的单元测试与dbunit的整合