JavaScript延迟执行技巧：setTimeout全面解析

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript延迟执行：setTimeout使用全解析》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

引言：理解JavaScript的异步性与UI更新

在Web开发中，我们经常需要实现一些带有时间延迟的操作，例如：等待几秒后显示一个提示、实现动画效果、或者在特定时间后执行某个任务。初学者可能会尝试使用类似同步编程语言中的sleep函数来暂停程序的执行。然而，JavaScript作为一种单线程语言，在浏览器环境中运行时，其主线程同时负责执行JavaScript代码、渲染页面（DOM更新、CSS样式应用）以及处理用户交互事件（如点击、滚动）。

如果我们在JavaScript中使用一个同步的“忙等待”循环（例如，通过while循环不断检查时间），就像以下伪代码所示：

function sleep(milliseconds) {
    const date = Date.now();
    let currentDate = null;
    do {
        currentDate = Date.now();
    } while (currentDate - date < milliseconds);
}

这种sleep函数会完全阻塞JavaScript主线程。这意味着在sleep函数执行期间，浏览器无法进行任何DOM更新、CSS重绘，也无法响应用户的任何操作。对于用户来说，页面会显得“冻结”或“卡死”，直到sleep函数执行完毕。这就是为什么在尝试实现按钮颜色先变黄，等待200ms后再变红时，最终只看到按钮直接变红的原因——在同步等待的200ms内，浏览器没有机会渲染黄色，只有当sleep结束后，所有DOM操作才一次性被渲染出来。

setTimeout：实现非阻塞延迟的关键

为了在JavaScript中实现非阻塞的时间延迟，我们必须利用其异步机制。setTimeout是浏览器和Node.js环境中提供的一个核心函数，用于在指定延迟时间后执行一个函数。

setTimeout的基本语法

setTimeout()函数的基本语法如下：

setTimeout(callbackFunction, delayInMilliseconds, [arg1, arg2, ...]);

• callbackFunction: 必需。在延迟时间结束后要执行的函数。
• delayInMilliseconds: 必需。延迟的毫秒数。函数会在这个时间后被添加到事件队列中，等待主线程空闲时执行。如果设置为0，函数会尽可能快地执行，但仍是异步的。
• arg1, arg2, ...: 可选。传递给callbackFunction的额外参数。

setTimeout的返回值是一个定时器ID，可以用于后续通过clearTimeout()取消这个定时器。

// 示例：2秒后在控制台打印消息
setTimeout(() => {
  console.log('2秒钟过去了！');
}, 2000); // 延迟2000毫秒（即2秒）

案例解析：按钮颜色闪烁的正确实现

现在，让我们回到最初的按钮颜色闪烁问题，并使用setTimeout来正确实现它。

错误的同步实现回顾：

// HTML
// Press

// JavaScript (错误的实现)
function sleep(milliseconds) {
    const date = Date.now();
    let currentDate = null;
    do {
        currentDate = Date.now();
    } while (currentDate - date < milliseconds);
}

function highlight_button_wrong(button_id){
    button_id.style.backgroundColor="yellow"; // 设置黄色
    sleep(200); // 阻塞主线程200ms
    button_id.style.backgroundColor="red";    // 设置红色
}

const myButton = document.getElementById('myButton');
myButton.addEventListener('click', () => highlight_button_wrong(myButton));

// 结果：按钮直接变红，没有黄色过渡

正确的使用setTimeout实现：

// HTML
// Press

// JavaScript (正确的实现)
function highlight_button_correct(button_element){
    // 1. 立即将按钮背景色设置为黄色
    button_element.style.backgroundColor = "yellow";

    // 2. 使用 setTimeout 在 200 毫秒后执行一个函数
    setTimeout(() => {
        // 这个函数将在 200 毫秒后被执行
        button_element.style.backgroundColor = "red";
    }, 200); // 延迟 200 毫秒
}

const myButton = document.getElementById('myButton');
myButton.addEventListener('click', () => highlight_button_correct(myButton));

代码执行流程解析：

1. 当用户点击按钮时，highlight_button_correct函数被调用。
2. button_element.style.backgroundColor = "yellow"; 这行代码会立即执行，将按钮的背景色设置为黄色。
3. 关键点： 浏览器的主线程在执行完这行代码后，会立即将UI更新（渲染出黄色）。
4. setTimeout(() => { ... }, 200); 这行代码执行时，setTimeout会将匿名函数（即设置背景色为红色的操作）添加到浏览器的事件队列中，并安排它在200毫秒后执行。
5. 非阻塞： setTimeout本身不会阻塞主线程。主线程在安排好这个任务后，会立即继续执行后续的JavaScript代码（如果没有的话，就进入空闲状态，等待事件）。
6. 在接下来的200毫秒内，浏览器是“活的”，它可以渲染出黄色的按钮，并且可以响应其他用户交互。
7. 200毫秒后，setTimeout安排的回调函数会被添加到事件队列的末尾。当主线程空闲时（即没有其他同步代码正在执行），事件循环会从队列中取出这个回调函数并执行它。
8. 回调函数执行 button_element.style.backgroundColor = "red";，将按钮背景色设置为红色。
9. 浏览器再次更新UI，显示红色的按钮。

通过这种方式，我们成功实现了按钮先变黄，短暂延迟后变红的预期效果，并且在整个过程中，页面保持响应。

深入理解：为什么同步等待是错误的

JavaScript的执行模型基于“事件循环”（Event Loop）。简单来说，JavaScript的主线程会不断地从一个“任务队列”（Task Queue，也称作消息队列或事件队列）中取出任务并执行。这些任务包括用户事件（点击、按键）、网络请求回调、定时器回调（如setTimeout、setInterval）等。

当您执行同步代码时，主线程会一直忙碌，直到所有同步代码执行完毕。在此期间，事件队列中的任务不会被处理，UI渲染更新也不会发生。

• sleep函数的问题： 我们的sleep函数本质上是一个CPU密集型的忙等待循环。它让主线程持续忙碌，不给浏览器执行其他任务（如UI渲染）的机会。
• setTimeout的优势： setTimeout则不同，它不会让主线程等待。它只是告诉浏览器：“嘿，200毫秒后，请把这个函数放到事件队列里。”然后主线程就可以自由地去处理其他事情，比如渲染DOM更新。当200毫秒过去，并且主线程空闲时，事件循环会发现队列中的setTimeout回调，然后执行它。

这种异步处理机制是JavaScript在浏览器环境中实现响应式用户界面的基石。

注意事项与进阶应用

1. clearTimeout()：取消延迟执行setTimeout会返回一个唯一的定时器ID。如果您需要在延迟时间到达之前取消一个已设置的定时器，可以使用clearTimeout()函数：

   const timerId = setTimeout(() => {
       console.log('这条消息不会被打印');
   }, 5000);
   
   // 在5秒钟之前取消定时器
   clearTimeout(timerId);

2. 最小延迟时间 浏览器对setTimeout的延迟时间有一个最小限制，通常是4毫秒。这意味着即使您设置setTimeout(callback, 0)，回调函数也不会立即执行，而是会在主线程空闲后尽快执行，但实际延迟通常会大于0毫秒（通常是4毫秒或更长，取决于浏览器和系统负载）。

3. 链式延迟与动画序列 对于更复杂的动画序列，您可能需要在一个setTimeout的回调中设置另一个setTimeout。

   function animateButton(button_element) {
       button_element.style.backgroundColor = "yellow"; // 第一步：变黄
       setTimeout(() => {
           button_element.style.backgroundColor = "orange"; // 第二步：变橙
           setTimeout(() => {
               button_element.style.backgroundColor = "red"; // 第三步：变红
           }, 200); // 橙色到红色延迟200ms
       }, 200); // 黄色到橙色延迟200ms
   }
   // 这种嵌套方式对于少量步骤可行，但对于复杂序列，建议使用 Promise 和 async/await 结合 setTimeout

   对于更复杂的异步序列，现代JavaScript更推荐使用Promise和async/await语法来管理，可以使代码更具可读性：

   function delay(ms) {
       return new Promise(resolve => setTimeout(resolve, ms));
   }
   
   async function animateButtonAsync(button_element) {
       button_element.style.backgroundColor = "yellow";
       await delay(200);
       button_element.style.backgroundColor = "red";
       // 可以继续添加更多步骤
       // await delay(200);
       // button_element.style.backgroundColor = "blue";
   }
   
   myButton.addEventListener('click', () => animateButtonAsync(myButton));

总结

在JavaScript中实现时间延迟，尤其是涉及UI更新的场景时，切勿使用同步的忙等待循环（如自定义的sleep函数）。这会导致主线程阻塞，页面卡顿，严重影响用户体验。正确的做法是利用setTimeout等异步定时器函数，将需要延迟执行的代码放入回调函数中。setTimeout将任务调度到事件队列，允许主线程在等待期间处理其他任务，从而确保应用程序的响应性和流畅性。掌握setTimeout的正确使用是进行高效、用户友好的Web开发的关键一步。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~