本文更具JavaScript标准参考教程-阮一峰 整理笔记
timeout
翻译为超时, interval
翻译为间隙
setTimeout()
设置超时调用
setInterval()
设置间歇调用
setTimeout()
用法: setTimeout(func, delay)
表示delay
毫秒后运行func
函数,func
是回调函数
func
可以换成一段代码。
console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
// 1
// 3
// 2
若func
有参数,那么在delay
后面添加参数, 表示func
的参数
console.log(1);
setTimeout(function (a){console.log(a)},1000, 2);//2为函数的实参, a为形参
console.log(3);
// 1
// 3
// 2
参数delay
可以省略, 省略时默认为0
即:
setTimeout(func)
// 等同于
setTimeout(func, 0)
如果回调函数是对象的方法,那么setTimeout
使得方法内部的this
关键字指向全局环境,而不是定义时所在的那个对象
var x = 1;
var obj = {
x: 2,
y: function () {
console.log(this.x);
}
};
setTimeout(obj.y, 1000) // 1
我们有两种方法解决, 一种是在匿名函数中调用obj.y
setTimeout(function () {
obj.y();
}, 1000);
// 2
另一种是使用bind
方法绑定
setTimeout(obj.y.bind(obj), 1000) //2
setInterval()
这个方法的用法和setTimeout()
方法的用法一致, 区别是setInterval()
是每隔一段时间执行一次, 而setTimeout()
方法只执行一次
setInterval()
指定的是“开始执行”
的间隔, 这意味着它不会管函数运行的时间。 当下一次函数开始执行时, 若前一次函数还未运行完, 下一次的函数还是会照样触发。
要想确保两次函数执行的时间间隔相等, 可以使用setTimeout()
来代替:
setTimeout(function f() {
// ...
setTimeout(f, 2000);
}, 2000);//两次执行时间间隔2秒
clearTimeout(), clearInterval()
setTimeout()
都会返回一个整数值, 每一次调用setTimeout()
会返回一个比原来大1
的整数值, 即返回的值是递增的。
有了这个整数值, 我们可以通过clearTimeout()
的方法清楚对应的定时器;
var id = setTimeout(f, 1000);
clearTimeout(id); //清楚定时器
对于setInterval()
也会有一个整数返回值, 它和setTimeout()
返回值的使用方法一样。
var id = setInterval(f, 1000);
clearInterval(id); //清楚定时器
debounce函数
有时我们不希望回调函数被频繁调用, 那么可以通过上面的方法制作防抖动函数
function debounce(fn, delay){
var timer = null; // 声明计时器
return function() {
var context = this;
var args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
这样我们就可以设置定时器的最小执行时间了
运行机制
setTimeout
和setInterval
的回调函数, 必须等到本轮事件循环中的所有同步任务都执行完才开始执行。
setTimeout(someTask, 100); //0.1s后执行
veryLongTask(); //这是同步任务, 执行事件非常常
上面的代码中veryLongTask
要是在0.1s
后还没有执行完, 那么setTimeout
函数只能一致等到veryLongTask
执行完才会开始执行
setTimeout(func, 0)
setTimeout(func, 0)
并不一定会立刻执行, 因为这个方法会等到本轮所有的同步任务执行完才会执行。我们可以理解为它会在下一轮事件循环一开始就执行。
这个方法可以应用在冒泡事件上, 也可以应用在keypress
事件上等。