JavaScript定时器|极客笔记

JavaScript定时器

JavaScript是一门用于在网页中实现交互的脚本语言，其中定时器是一项非常常见和重要的功能。定时器可帮助我们控制代码执行的时间，例如延迟执行某个函数、周期性地执行某个任务等。在JavaScript中，有两种类型的定时器：setTimeout和setInterval。接下来我们将详细介绍这两种定时器的使用方法和示例代码。

setTimeout

setTimeout函数用于在一段时间后执行一次特定的函数。其语法如下：

setTimeout(function, delay)

其中，function是要执行的函数，delay是延迟的时间，以毫秒为单位。下面我们来看一个示例：

function greet() {
  console.log("Hello, world!");
}

setTimeout(greet, 2000); // 2秒后输出 "Hello, world!"

在上面的示例中，定义了一个名为greet的函数，然后调用setTimeout函数，在2秒后执行greet函数，控制台输出”Hello, world!”。

取消setTimeout

如果在调用setTimeout后，又想取消延时执行的函数，可以使用clearTimeout方法。其语法如下：

let timeoutId = setTimeout(function, delay);
clearTimeout(timeoutId);

下面是一个示例：

function greet() {
  console.log("Hello, world!");
}

let timeoutId = setTimeout(greet, 2000);
clearTimeout(timeoutId); // 取消延时执行

在上面的示例中，setTimeout函数返回一个唯一的timeoutId，可以通过clearTimeout方法取消延时执行。

setInterval

setInterval函数用于每隔一段时间重复执行特定的函数。其语法如下：

setInterval(function, interval)

其中，function是要重复执行的函数，interval是执行间隔的时间，以毫秒为单位。下面我们来看一个示例：

function count() {
  console.log("1 second passed");
}

setInterval(count, 1000); // 每隔1秒输出 "1 second passed"

在上面的示例中，定义了一个名为count的函数，然后调用setInterval函数，每隔1秒执行count函数，控制台输出”1 second passed”。

取消setInterval

如果在调用setInterval后，又想取消周期性执行的函数，可以使用clearInterval方法。其语法如下：

let intervalId = setInterval(function, interval);
clearInterval(intervalId);

下面是一个示例：

function count() {
  console.log("1 second passed");
}

let intervalId = setInterval(count, 1000);
clearInterval(intervalId); // 取消周期性执行

在上面的示例中，setInterval函数返回一个唯一的intervalId，可以通过clearInterval方法取消周期性执行。

应用举例

定时器在实际开发中有着广泛的应用，下面是一个简单的倒计时示例：

let countDown = 10;

function updateCount() {
  console.log(`Counting down: ${countDown}`);
  countDown--;

  if (countDown < 0) {
    clearInterval(intervalId);
    console.log("Countdown finished!");
  }
}

let intervalId = setInterval(updateCount, 1000);

在上面的示例中，定义了一个countDown变量，初始值为10，然后定义了一个updateCount函数，用于更新倒计时并输出。通过setInterval函数每秒执行一次updateCount函数，当倒计时结束时取消周期性执行并输出”Countdown finished!”。