JS中SetTimeout和SetInterval使用初探

2023年6月11日下午12:25 • JavaScript

我来为你详细讲解一下 “JS中SetTimeout和SetInterval使用初探”的攻略，包括示例说明：

简介

在 JS 中，setTimeout 和 setInterval 都能用来设置定时器，它们都是 window 对象的方法。它们非常常用，能够通过回调函数的方式实现一些延时操作或者是循环操作。这里我会结合示例带领大家初步了解它们的使用。

setTimeout

setTimeout 可以延迟一定时间后执行一个回调函数，传入两个参数：回调函数和延迟时间，单位是毫秒，例如：

setTimeout(function() {
  console.log('延迟 1 秒钟后输出');
}, 1000);

这个函数会等待 1000ms（1秒钟）后执行 console.log 输出“延迟 1 秒钟后输出”。

值得注意的是，setTimeout 的延迟时间不是准确的时间，而是大于等于指定时间，因为 setTimeout 是将回调函数放到了任务队列中，而任务队列中的任务执行需要一定的时间。如果有其他任务比它先加入到队列中，该回调函数会等待前面的任务执行完后再被执行。

也就是说，如果设定的延迟时间很短，但前面有其他耗时的任务在执行，那么该回调函数就要等待前面的任务执行完才会被执行。因此，setTimeout 并不能保证任务在指定时间内一定会执行。

但是，可以通过 clearTimeout 函数取消设置的定时器，例如：

var timerId = setTimeout(function() {
  console.log('延迟 1 秒钟后输出');
}, 1000);

clearTimeout(timerId);

在这个示例中，setTimeout 函数返回的是一个未来的唯一 ID，我们可以将它赋值给一个变量，然后在需要的时候，通过 clearTimeout 函数取消设置的定时器。需要注意的是，如果正在执行的回调函数内部调用了 clearTimeout 函数，那么这个定时器也会被取消。

setInterval

setInterval 和 setTimeout 的用法非常相似，不同的是 setInterval 会不断地在指定的时间间隔内循环执行回调函数。

例如：

function clock() {
  console.log(new Date().toLocaleTimeString());
}

setInterval(clock, 1000);

这个函数会每隔 1000ms 循环执行 clock 函数，并输出当前时间，也就是一个秒表。

与 setTimeout 一样，setInterval 也可以通过 clearInterval 函数取消循环定时器，例如：

var timerId = setInterval(function() {
  console.log('每隔 1 秒钟输出一次');
}, 1000);

clearInterval(timerId);

如果正在执行的回调函数内部调用了 clearInterval 函数，那么这个循环定时器也会被取消。

示例说明

接下来我再给出一些更为详细的示例说明帮助大家更好地理解它们的应用场景。

示例一：倒计时

var countDown = 10;

function tick() {
  console.log(countDown);
  if (countDown === 0) {
    console.log('倒计时结束');
    clearTimeout(timerId);
  } else {
    countDown--;
  }
}

var timerId = setInterval(tick, 1000);

这个示例中我们通过使用 setInterval 来实现倒计时，每隔 1000ms 输出当前倒计时的数字，直到倒计时结束。当倒计时结束时，我们通过 clearTimeout 函数来取消循环定时器。

示例二：轮播图

var images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
];

var current = 0;

function changeImage() {
  var img = document.getElementById('image');
  img.setAttribute('src', images[current]);

  current++;

  if (current === images.length) {
    current = 0;
  }
}

var timerId = setInterval(changeImage, 3000);

这个示例中我们通过使用 setInterval 来实现轮播图的效果，通过不断地切换图片实现自动轮播。每隔 3000ms 切换一次图片。同样，我们可以通过 clearInterval 函数来取消循环定时器，实现停止轮播的效果。