在 JavaScript 中巧妙运用 setTimeout() 和 clearTimeout()

2023-10-11 19:51:55

在 JavaScript 中，掌握 setTimeout() 和 clearTimeout() 函数对于管理异步任务至关重要。这两个函数允许开发人员安排函数在特定的时间间隔后执行，或者在特定条件下取消执行。

setTimeout() 的奥秘

setTimeout() 函数接收两个参数：一个要执行的函数和一个以毫秒为单位的时间间隔。在指定的时间间隔之后，setTimeout() 将调用该函数。

setTimeout(() => {
  console.log("300 毫秒后执行！");
}, 300); // 300 毫秒后执行

clearTimeout() 的妙用

clearTimeout() 函数用于取消 setTimeout() 设置的超时。如果一个超时已经设置，clearTimeout() 将阻止其执行。

let timeoutId = setTimeout(() => {
  console.log("取消！");
}, 300);

clearTimeout(timeoutId); // 取消超时

巧妙组合，妙用无穷

通过巧妙地组合 setTimeout() 和 clearTimeout()，开发人员可以实现各种复杂的异步行为。

延迟执行： 使用 setTimeout() 安排函数在指定的时间间隔后执行，从而延迟执行。

周期性执行： 使用 setTimeout() 在特定的时间间隔内不断调用一个函数，从而实现周期性执行。

取消未完成的任务： 使用 clearTimeout() 取消未完成的超时，从而在特定条件下终止任务。

实例实战

模拟现实的进度条：

function updateProgressBar() {
  // 假设我们有 10 个步骤，每一步需要 100 毫秒
  for (let i = 1; i <= 10; i++) {
    setTimeout(() => {
      // 更新进度条
      console.log(`进度：${i * 10}%`);
    }, i * 100); // 每 100 毫秒更新一次进度
  }
}

updateProgressBar();

用户输入时的实时验证：

const inputField = document.querySelector("input");

inputField.addEventListener("input", () => {
  // 设置一个超时，在用户停止输入 300 毫秒后验证输入
  let timeoutId = setTimeout(() => {
    // 验证输入
    console.log("验证输入...");
  }, 300);

  // 如果用户继续输入，则取消之前的超时
  clearTimeout(timeoutId);
});