JavaScript Timer：揭秘setTimeout()和setInterval()的幕后故事

2023-12-22 07:53:13

定时器概述

在JavaScript中，定时器是利用JavaScript引擎执行队列来实现的。当你在代码中调用定时器函数时，实际上是在告诉JavaScript引擎在指定的延迟时间后执行某个函数。JavaScript引擎会将这个函数及其延迟时间放入执行队列中，并在适当的时候执行它。

setTimeout()与setInterval()

setTimeout()和setInterval()都是JavaScript中的核心定时器函数。它们都有一个共同点，那就是都可以指定一个函数和一个延迟时间，但它们在执行方式上却存在着一些关键差异。

setTimeout()

setTimeout()函数的作用是安排一个函数在指定的延迟时间后执行一次。也就是说，它只执行一次。

语法：

setTimeout(function, milliseconds);

function：要执行的函数。
milliseconds：延迟时间，单位是毫秒。

示例：

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

setInterval()

setInterval()函数的作用是安排一个函数在指定的延迟时间后重复执行。也就是说，它会一直执行，直到你手动清除它。

语法：

setInterval(function, milliseconds);

function：要执行的函数。
milliseconds：延迟时间，单位是毫秒。

示例：

var intervalId = setInterval(function() {
  console.log("Hello, world!");
}, 3000); // 每3秒执行一次

// 清除定时器
clearInterval(intervalId);

repeat()函数

现在，我们来实现一个repeat()函数，使每3秒打印一个字符串，总共执行4次。

function repeat(string, times, delay) {
  var i = 0;
  var intervalId = setInterval(function() {
    console.log(string);
    i++;
    if (i >= times) {
      clearInterval(intervalId);
    }
  }, delay);
}

repeat("Hello, world!", 4, 3000); // 每3秒打印一次"Hello, world!"，总共打印4次