简介
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成。
Timeout
setTimeout
- 功能:指定某个函数或某段代码,在多少毫秒之后执行
- 语法:var timerId = setTimeout(func|code, delay)
- 参数
- Javascript语句字符串或者函数:要被执行的代码
- 时间间隔(毫秒):指示从当前起多少毫秒后执行第一个参数
- 返回值:一个整数,表示定时器的编号,以后可以用来取消这个定时器
实例
//Javascript语句字符串 setTimeout("alert('5 seconds!')", 5000); //函数 setTimeout(function() { alert('5 seconds!'); }, 5000)
clearTimeout
- 功能:取消指定的定时任务,已经开始执行的任务无法取消(?)
- 参数:定时事件id,即setTimeout执行后的返回值
- 返回值:undefined
实例:
var timedTaskId = setTimeout("alert('5 seconds!')", 5000); clearTimeout(timedTaskId);
Interval
setInterval
- 功能:按照指定的周期(以毫秒计)来调用函数或计算表达式
- 语法:setInterval(code,millisec[,”lang”])
- 参数
- code:必需,要调用的函数或要执行的代码串
- millisec:必须,周期性执行或调用 code 之间的时间间隔,以毫秒计
- 返回值:一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值
示例:
//Javascript语句字符串 setInterval("alert('5 seconds!')", 5000); //函数 setInterval(function() { alert('5 seconds!'); }, 5000)
clearInterval
- 功能:取消由 setInterval() 设置的定时任务
- 语法:clearInterval(id_of_setinterval)
- 参数
- id_of_setinterval:由 setInterval() 返回的 ID 值
- 返回值:undefined
示例
var timedTaskId = setInterval("alert('5 seconds!')", 5000); clearInterval(timedTaskId);
运行机制
参考《JavaScript 标准参考教程》的定时器的运行机制
常见问题
带循环调用的定时任务
可以通过创建一个函数循环重复调用setTimeout来实现类似setInterval的功能,示例如下所示:
function showTime() {
var today = new Date();
alert( " The time is: " + today.toString());
setTimeout( " showTime() " , 5000 );
}
showTime();
上面展示的代码实现的功能,可以使用setInterval实现代码如下所示:
function showTime() {
var today = new Date();
alert( " The time is: " + today.toString());
}
setInterval("showTime()", 5000);
转载:这两种方法可能看起来非常像,而且显示的结果也会很相似,不过两者的最大区别就是,setTimeout方法不会每隔5秒钟就执行一次showTime函数,它是在每次调用setTimeout后过5秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完,那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚,它只是简单地每隔一定时间就重复执行一次那个函数。如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout
回调函数传参
- setTimeout可以在第二个参数后加入更多的参数,这些参数依次作为回调函数调用时的参数使用,但是IE9.0及以下版本不支持。示例:
function add(a, b) {
console.log(a + b);
}
setTimeout(add, 1000, 1, 1); - 匿名函数调用回调函数传参。示例:
function add(a, b) {
console.log(a + b);
}
setTimeout(function() {
add(1, 1);
}, 1000); - 使用bind方法,把多余的参数绑定在回调函数上面,生成一个新的函数驶入setTimeout。示例:
function add(a, b) {
console.log(a + b);
}
setTimeout(add.bind(null, 1, 1), 1000); - 自定义setTimeout,使用apply方法将参数输入回调函数
注:setInterval的回调函数的参数问题同setTimeout
回调函数作用域问题
定时器默认的回调函数在执行时的作用域指向全局环境,而不是定义该回调函数的的对象。解决办法:
1. 匿名函数内部使用回调函数的归属对象来调用,或者使用apply来修改作用域
2. 使用bind方法,将回调函数的作用域绑定在指定对象上
取消所有的定时任务
setTimeout和setInterval函数,都返回一个表示计数器编号的整数值,将该整数传入clearTimeout和clearInterval函数,就可以取消对应的定时器。setTimeout和setInterval返回的整数值是连续的,也就是说,第二个setTimeout方法返回的整数值,将比第一个的整数值大1。利用这一点,可以写一个函数,取消当前所有的setTimeout。示例:
(function() {
var gid = setInterval(clearAllTimeouts, 0);
function clearAllTimeouts() {
var id = setTimeout(function() {}, 0);
while (id > 0) {
if (id !== gid) {
clearTimeout(id);
}
id--;
}
}
})();
注:本段摘自《JavaScript 标准参考教程》-定时器篇
setTimeout(f,0)
通过学习定时器的运行机制可以知道,f不会立即执行,它必须等到当前脚本的同步任务和“任务队列”中已有的事件,全部处理完后,才会执行。更多请参考《JavaScript 标准参考教程》-定时器的setTimeout(f,0)含义
时间间隔的最大值
32位数字,超过了为溢出,直接取0
应用
输入框防抖动
参考《JavaScript 标准参考教程》-定时器的clearTimeout实际应用
setTimeout(f,0)
根据setTimeout(f,0)的特性,它有很多应用场景,更多请参考《JavaScript 标准参考教程》-定时器的setTimeout(f,0)应用