setTimeout延迟执行函数详解

`setTimeout` 是 JavaScript 中用于延迟执行代码的关键函数。它允许开发者在指定的毫秒数后执行一段代码或函数，常用于实现定时任务、延时操作和异步处理。`setTimeout` 的基本用法是 `setTimeout(function, delay)`，其中 `function` 是要延迟执行的函数，`delay` 是延迟的时间（毫秒）。通过 `clearTimeout()` 函数，可以取消尚未执行的 `setTimeout` 任务，这在处理用户交互和资源加载时尤为重要，能有效避免不必要的副作用和内存泄漏。虽然 `setTimeout` 提供了延迟执行的功能，但其延迟时间并非绝对精确，而是一个最小延迟，实际执行时间会受到主线程阻塞和浏览器优化等因素的影响。理解 `setTimeout` 的这些特性，有助于编写更健壮的异步代码，提升用户体验。

setTimeout函数用于延迟执行代码一次，它返回一个定时器ID，允许通过clearTimeout取消任务。其与setInterval的区别在于：1.setTimeout是一次性执行，setInterval是周期性重复执行；2. clearTimeout用于取消setTimeout，clearInterval用于停止setInterval。延迟时间并非精确，而是最小延迟，实际执行受主线程阻塞和浏览器优化影响。掌握这些特性有助于避免副作用、提升用户体验和编写健壮的异步代码。

setTimeout函数的核心作用就是让一段代码在指定的时间间隔之后执行，而且只执行一次。它提供了一种非阻塞、异步的方式来调度任务，让你的程序在等待某个操作完成时，不会卡住，还能继续响应用户的其他交互。

解决方案

使用setTimeout来延迟执行代码，语法其实很直观：setTimeout(callbackFunction, delayInMilliseconds, arg1, arg2, ...)。

这里，callbackFunction是你想要延迟执行的那个函数。delayInMilliseconds则是延迟的时间，单位是毫秒。举个例子，如果你想让一个弹窗在页面加载2秒后才出现，你可以这么写：

setTimeout(() => {
    console.log("2秒钟过去了，我该出现了！");
    // 假设这里是显示弹窗的代码
}, 2000);

这个函数会返回一个数字，我们称之为“定时器ID”。这个ID非常有用，因为它允许你在设定的时间到达之前，取消这个延迟执行的任务。比如，用户突然改变主意，不想看到那个弹窗了，你就可以用clearTimeout(timerId)来撤销它。

const myTimer = setTimeout(() => {
    console.log("这段代码原本要执行的！");
}, 5000);

// 假设用户在3秒内做了某个操作，我们决定取消它
setTimeout(() => {
    clearTimeout(myTimer);
    console.log("定时器被取消了，那段代码不会执行了。");
}, 3000);

我个人觉得，理解这个定时器ID和clearTimeout的重要性，跟理解setTimeout本身一样重要。尤其是在处理用户交互或者资源加载时，避免不必要的副作用或内存泄漏，全靠它了。

setTimeout与setInterval有什么区别？

说实话，刚开始接触JavaScript的异步编程时，我经常会把setTimeout和setInterval这两个函数搞混。它们都和时间有关，但用途却截然不同。

setTimeout就像是设定一个一次性闹钟：时间到了，响一声，然后就完事了。它只执行你指定的回调函数一次。比如，你只想在用户登录成功后，延迟几秒显示一个欢迎消息，那用setTimeout再合适不过了。

// 模拟登录成功后延迟显示欢迎语
setTimeout(() => {
    console.log("欢迎回来，尊贵的会员！");
}, 1500);

而setInterval则更像是一个循环闹钟：每隔一段时间，它就会响一次，而且会一直响下去，直到你明确地把它关掉。它会重复执行你的回调函数。这在需要周期性更新数据（比如股票价格）、实现轮播图或者制作一个实时时钟时非常有用。

let count = 0;
const intervalId = setInterval(() => {
    count++;
    console.log(`我已经在重复执行了 ${count} 次`);
    if (count >= 5) {
        clearInterval(intervalId); // 达到条件后停止循环
        console.log("停止重复执行了。");
    }
}, 1000);

所以，核心区别就是：一次性任务用setTimeout，重复性任务用setInterval。当然，你也可以通过递归调用setTimeout来模拟setInterval的行为，这在某些场景下（比如确保前一个任务完成后再开始下一个周期）会更灵活，也更健壮。

如何清除或取消一个setTimeout定时器？

清除或取消一个setTimeout定时器，这是个非常实用的操作，尤其是在前端开发中，很多时候我们设定的延迟任务可能因为用户的操作或者其他逻辑变化而变得不再需要。这就需要用到前面提到过的clearTimeout()函数。

它的用法很简单：你只需要把setTimeout返回的那个定时器ID作为参数传给clearTimeout()就行了。

let messageDisplayed = false;

const popupTimer = setTimeout(() => {
    if (!messageDisplayed) {
        console.log("这是延迟显示的通知！");
        messageDisplayed = true;
    }
}, 5000); // 设定5秒后显示通知

// 假设用户在3秒的时候点击了一个按钮，我们决定取消这个通知
document.getElementById('cancelButton').addEventListener('click', () => {
    clearTimeout(popupTimer);
    console.log("通知已被用户取消，不会再显示了。");
    messageDisplayed = true; // 确保即使定时器没被取消，下次也不会重复显示
});

// 这是一个模拟的按钮点击事件
// 在实际应用中，'cancelButton'会是一个DOM元素
setTimeout(() => {
    // 模拟用户点击取消按钮
    console.log("模拟用户在3秒时点击了取消按钮。");
    document.getElementById('cancelButton').click(); // 触发点击事件
}, 3000);

在上面的例子中，我们设定了一个5秒后显示的通知。但如果在5秒到达之前，用户点击了某个“取消”按钮（这里用一个模拟的点击事件代替），那么通过clearTimeout(popupTimer)，那个通知就不会再显示了。这对于防止不必要的UI更新、避免资源浪费或者处理用户快速切换页面时的遗留任务都至关重要。我遇到过好几次，就是因为没搞清楚这个，导致用户关闭了弹窗，结果几秒后又自己弹出来了，用户体验极差。所以，记住，只要你设定的延迟任务有取消的可能性，就一定要保留那个定时器ID，并且在适当的时候调用clearTimeout。

setTimeout的延迟时间真的准确吗？

这个问题嘛，答案是：它是一个最小延迟，而不是一个精确延迟。这听起来有点绕，但理解它对于编写健壮的异步代码非常重要。

当你设置setTimeout(func, 1000)时，你告诉浏览器的是：“请在至少1000毫秒之后，把func这个函数放到执行队列里。”请注意“至少”这两个字。JavaScript是单线程的，这意味着它一次只能做一件事。setTimeout的回调函数并不是在精确的延迟时间一到就立即执行，而是会在那个时间点之后，被推入浏览器的事件队列（或者叫任务队列）。

如果此时主线程正在忙于执行其他耗时任务（比如复杂的DOM操作、大量的计算），那么即使setTimeout设定的时间到了，你的回调函数也必须等待主线程空闲下来，才能从队列中被取出并执行。这就会导致实际执行的时间比你设定的延迟时间要长。

console.log("开始时间:", new Date().toLocaleTimeString());

setTimeout(() => {
    console.log("setTimeout回调执行时间:", new Date().toLocaleTimeString());
}, 1000); // 理论上1秒后执行

// 模拟一个耗时操作，阻塞主线程
let startTime = Date.now();
while (Date.now() - startTime < 2000) {
    // 忙碌等待2秒
}
console.log("主线程忙碌结束:", new Date().toLocaleTimeString());

运行这段代码，你会发现setTimeout的回调函数并不是在精确的1秒后执行的，它会等到主线程的2秒忙碌结束后，才能轮到它执行。

此外，浏览器还有一些自己的优化策略。比如，在非活动标签页中，浏览器可能会对setTimeout的执行频率进行节流，将其最小延迟时间增加到1000毫秒甚至更高，以节省系统资源。

所以，如果你需要一个非常精确的时间间隔（比如动画帧），setTimeout可能不是最佳选择，你可能需要考虑requestAnimationFrame。但对于大多数普通的延迟执行任务，setTimeout提供的“最小延迟”已经足够用了。理解它的非精确性，能帮助我们更好地设计和调试异步逻辑。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《setTimeout延迟执行函数详解》文章吧，也可关注golang学习网公众号了解相关技术文章。