在 JavaScript 中实现定时器主要有两种方式:
- setTimeout():在指定的毫秒数后执行函数一次。
setTimeout(() => {
console.log('Hello');
}, 1000);
- setInterval():每隔指定的毫秒数就执行函数一次。
setInterval(() => {
console.log('Hello');
}, 1000);
使用定时器需要注意以下几点:
- 定时器返回一个整数,代表定时器的 ID。可以通过 clearTimeout() 或 clearInterval() 来取消定时器。
let timer = setTimeout(() => {
console.log('Hello');
}, 1000);
clearTimeout(timer); // 取消定时器
- 定时器中的代码会在当前代码执行结束后触发,即定时器是异步的。
console.log('Start');
setTimeout(() => {
console.log('Hello');
}, 0);
console.log('End');
// 输出:
// Start
// End
// Hello
- 定时器会与事件循环以及其他异步任务一起触发,定时器的触发时间也存在误差。
setTimeout(() => {
console.log('Hello');
}, 1000);
let startTime = new Date().getTime();
// do some staff
let endTime = new Date().getTime();
console.log(endTime - startTime);
// 可能大于1000ms
- 定时器中的this关键字指向 window 对象。如果要使用 this 关键字,可以使用箭头函数或对 this 进行绑定。
setTimeout(function() {
console.log(this); // window
}, 1000);
setTimeout(() => {
console.log(this); // 父作用域中的this
}, 1000);
setTimeout(function() {
console.log(this);
}.bind({a: 1}), 1000); // {a: 1}
所以,总结来说 JavaScript 定时器主要有两种方式:
- setTimeout():在指定的毫秒数后执行函数一次。
- setInterval():每隔指定的毫秒数就执行函数一次。
需要注意的点有:
- 定时器有返回的 ID,可以通过 clearTimeout() 取消。
- 定时器是异步的,会在当前代码后触发。
- 定时器与事件循环一起触发,时间有误差。
- 定时器中的 this 绑定 window,需要用箭头函数或bind() 绑定。