JS延时定时器——让JavaScript程序按你的规则执行|极客笔记

JS延时定时器——让JavaScript程序按你的规则执行

介绍

在JavaScript中，我们有时候需要让程序按照一定的时间规则执行，比如定时显示弹窗、周期性刷新页面内容等等。为了实现这样的需求，我们可以使用延时定时器（setTimeout）和周期定时器（setInterval）。

延时定时器允许我们在一定的延时后执行指定的代码。周期定时器则允许我们按照特定的时间间隔重复执行指定的代码。

本文将详细介绍延时定时器和周期定时器的用法和注意事项，并给出一些实例来帮助大家更好地理解。

延时定时器

延时定时器或称为定时器是一个常用的JavaScript函数，它可以在指定的延时后执行一段代码。具体用法如下：

setTimeout(function() {
  // 执行需要延时执行的代码
}, delay);

其中，function() {} 内填写需要延时执行的代码， delay 是以毫秒为单位的延时时间。延时定时器会等待指定的延时时间后执行代码。

延时定时器的返回值是一个定时器对象，可以用来取消定时器。我们可以使用 clearTimeout() 方法来取消延时定时器。示例代码如下：

let timeoutId = setTimeout(function() {
  // 执行需要延时执行的代码
}, delay);

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

延时定时器的应用场景非常广泛。比如，我们可以使用它来实现一些UI动画效果，或者在用户进行操作后等待一段时间再执行某些逻辑。

周期定时器

周期定时器允许我们按照一定的时间间隔重复执行指定的代码。具体用法如下：

setInterval(function() {
  // 执行需要周期执行的代码
}, interval);

其中，function() {} 内填写需要周期执行的代码， interval 是以毫秒为单位的时间间隔。周期定时器会在每个时间间隔后不断重复执行代码。

周期定时器的返回值也是一个定时器对象，可以用来取消定时器。我们可以使用 clearInterval() 方法来取消周期定时器。示例代码如下：

let intervalId = setInterval(function() {
  // 执行需要周期执行的代码
}, interval);

// 取消定时器
clearInterval(intervalId);

周期定时器可以用于定时刷新页面内容、轮播图、定时检查任务状态等等。需要注意的是，虽然周期定时器可以按照指定的时间间隔重复执行代码，但可能会存在一些误差。这是因为JavaScript是单线程执行的，当前面的代码还未执行完毕时，后续的代码会被阻塞。因此，如果周期时间间隔设置过小，可能会导致周期定时器无法精确执行。

示例

为了更好地理解延时定时器和周期定时器的用法，下面给出几个具体的示例。

示例1：使用延时定时器实现弹窗效果

// 弹窗函数
function showAlert() {
  alert("这是一个弹窗");
}

// 3秒后弹出弹窗
setTimeout(showAlert, 3000);

上面的示例中，我们定义了一个 showAlert() 函数，用来弹出一个提示框。然后使用 setTimeout() 在3秒后调用 showAlert() 函数，实现延时弹窗效果。

示例2：使用周期定时器实现计时器

// 显示时间的元素
let timerElement = document.getElementById("timer");

// 计时器
let seconds = 0;
let intervalId = setInterval(function() {
  seconds++;
  timerElement.innerHTML = seconds;
}, 1000);

上面的示例中，我们定义了一个 timerElement 变量，用来表示显示时间的HTML元素。然后使用 setInterval() 设置一个周期为1秒的计时器，每秒钟更新 seconds 的值，并将其赋值给 timerElement 的 innerHTML 属性，实现实时显示计时器功能。