如何在Javascript中实现定时器功能？有哪些注意点？

在 JavaScript 中实现定时器主要有两种方式:

1. setTimeout():在指定的毫秒数后执行函数一次。

setTimeout(() => {
  console.log('Hello'); 
}, 1000);

2. setInterval():每隔指定的毫秒数就执行函数一次。

setInterval(() => {
  console.log('Hello'); 
}, 1000);

使用定时器需要注意以下几点:

1. 定时器返回一个整数,代表定时器的 ID。可以通过 clearTimeout() 或 clearInterval() 来取消定时器。

let timer = setTimeout(() => {
  console.log('Hello'); 
}, 1000);

clearTimeout(timer);  // 取消定时器

2. 定时器中的代码会在当前代码执行结束后触发,即定时器是异步的。

console.log('Start');
setTimeout(() => {
  console.log('Hello'); 
}, 0);
console.log('End');

// 输出:
// Start 
// End
// Hello

3. 定时器会与事件循环以及其他异步任务一起触发,定时器的触发时间也存在误差。

setTimeout(() => {
  console.log('Hello'); 
}, 1000);

let startTime = new Date().getTime();
// do some staff
let endTime = new Date().getTime();
console.log(endTime - startTime); 
// 可能大于1000ms

4. 定时器中的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 定时器主要有两种方式:

1. setTimeout():在指定的毫秒数后执行函数一次。
2. setInterval():每隔指定的毫秒数就执行函数一次。

需要注意的点有:

1. 定时器有返回的 ID,可以通过 clearTimeout() 取消。
2. 定时器是异步的,会在当前代码后触发。
3. 定时器与事件循环一起触发,时间有误差。
4. 定时器中的 this 绑定 window,需要用箭头函数或bind() 绑定。