js实现定时器

在JavaScript中，可以使用setTimeout函数实现定时器。该函数接受两个参数：第一个参数是要执行的函数，第二个参数是延迟时间（以毫秒为单位）。

JavaScript定时器是一种在指定的时间间隔后执行代码的工具，它们通常用于在特定的时间间隔内重复执行某项任务，或者在一段时间之后执行某个操作，在JavaScript中，有两种类型的定时器：单次定时器和循环定时器。

1. 创建单次定时器

要创建一个单次定时器，可以使用setTimeout()函数，这个函数接受两个参数：一个是要执行的函数，另一个是延迟的时间（以毫秒为单位），当指定的时间过去后，将执行该函数。

示例代码：

function sayHello() {
  console.log("Hello, World!");
}
setTimeout(sayHello, 3000); // 3秒后执行sayHello函数

在这个例子中，我们定义了一个名为sayHello的函数，它打印出"Hello, World!"，我们使用setTimeout()函数在3秒后执行这个函数。

2. 创建循环定时器

要创建一个循环定时器，可以使用setInterval()函数，这个函数也接受两个参数：一个是要执行的函数，另一个是时间间隔（以毫秒为单位），与setTimeout()不同，setInterval()会每隔指定的时间间隔重复执行函数。

示例代码：

function sayHello() {
  console.log("Hello, World!");
}
let intervalId = setInterval(sayHello, 1000); // 每隔1秒执行sayHello函数

在这个例子中，我们同样定义了一个名为sayHello的函数，并使用setInterval()函数每隔1秒执行这个函数，为了在需要时停止定时器，我们需要将其ID存储在一个变量中（例如intervalId），以便稍后使用clearInterval()函数清除定时器。

3. 清除定时器

当你不再需要定时器时，应该使用clearTimeout()或clearInterval()函数来清除它，否则，定时器将继续运行，即使它的回调函数已经完成了执行。

示例代码：

function sayHello() {
  console.log("Hello, World!");
}
let intervalId = setInterval(sayHello, 1000); // 每隔1秒执行sayHello函数
// 5秒后清除定时器
setTimeout(() => clearInterval(intervalId), 5000);

在这个例子中，我们在5秒后清除了定时器，这样，定时器将在5秒后停止执行sayHello函数。

4. 使用Promise封装定时器

有时，你可能希望在定时器完成后执行一些操作，为了实现这一点，可以将定时器的回调函数包装在一个Promise对象中，这样，你可以使用then()方法来处理定时器完成的情况。

示例代码：

function sayHello() {
  return new Promise((resolve) => {
    console.log("Hello, World!");
    resolve(); // 当回调函数执行完毕后，调用resolve()方法表示Promise已成功完成
  });
}
sayHello().then(() => {
  console.log("定时器已完成"); // 当Promise完成时，执行此回调函数
});

在这个例子中，我们将sayHello函数包装在一个Promise对象中，当回调函数执行完毕后，我们调用resolve()方法表示Promise已成功完成，我们可以使用then()方法来处理定时器完成的情况。