JavaScript延迟执行：setTimeout非阻塞用法解析

大家好，我们又见面了啊~本文《JavaScript延迟执行技巧：setTimeout非阻塞应用》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

本文深入探讨了在JavaScript中实现代码延迟执行的正确方法，着重指出自定义同步sleep函数在浏览器环境中会导致UI阻塞的问题。通过详细解析JavaScript的事件循环机制，文章演示了如何利用setTimeout函数实现非阻塞的异步延迟，从而确保用户界面的流畅响应。文中提供了具体代码示例，帮助读者理解并掌握在Web开发中进行时间控制的最佳实践。

理解JavaScript中的阻塞与非阻塞操作

在Web开发中，我们经常会遇到需要让代码在一段时间后执行特定操作的场景，例如动画效果、延时提示或数据加载。初学者可能会尝试编写一个自定义的sleep函数来暂停代码执行，就像在某些同步编程语言中那样。然而，在浏览器环境下的JavaScript中，这种做法会导致严重问题。

为什么自定义sleep函数行不通？

浏览器中的JavaScript是单线程的，这意味着在任何给定时刻，只有一个任务能够被执行。这个线程不仅负责执行你的JavaScript代码，还负责处理用户交互（如点击）、更新用户界面（UI）以及执行网络请求等。

考虑以下一个尝试实现延迟效果的sleep函数：

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

// 示例：尝试让按钮闪烁
function highlightButton(buttonElement) {
    buttonElement.style.backgroundColor = "yellow"; // 设置为黄色
    sleep(200); // 尝试暂停200毫秒
    buttonElement.style.backgroundColor = "red";   // 设置为红色
}

// HTML结构
// Press

// 假设myButton是获取到的DOM元素
// myButton.addEventListener('click', () => highlightButton(myButton));

当highlightButton函数被调用时：

1. 按钮背景色立即变为黄色。
2. sleep(200)函数被调用。此时，JavaScript主线程会进入一个忙碌等待（busy-wait）循环，它会不断检查当前时间是否超过了200毫秒。
3. 关键问题： 在这个200毫秒的循环期间，主线程被完全占用，无法执行其他任何任务，包括更新UI。这意味着，虽然代码逻辑上将背景色设为黄色，但浏览器没有机会将这个变化渲染到屏幕上。
4. 200毫秒后，sleep函数结束，主线程恢复执行，并将按钮背景色设置为红色。
5. 此时，浏览器才终于有机会更新UI，用户会直接看到按钮变为红色，而黄色状态从未显示。

这种行为不仅会导致UI卡顿，还会使用户体验变得非常糟糕，因为在sleep期间，页面会变得无响应。

正确的解决方案：使用setTimeout实现异步延迟

JavaScript提供了专门的异步函数来处理延迟执行的需求，其中最常用的是setTimeout。setTimeout函数不会阻塞主线程，而是将一个函数（回调函数）安排在指定的延迟时间后执行。

setTimeout的语法：

setTimeout(callbackFunction, delayInMilliseconds);

• callbackFunction: 一个在延迟时间结束后执行的函数。
• delayInMilliseconds: 延迟的时间，以毫秒为单位。

工作原理：

当setTimeout被调用时，它会将回调函数放入一个“任务队列”（或更准确地说，Web API会将回调函数推送到事件队列中，等待事件循环处理）。主线程会继续执行后续代码，而不会等待延迟结束。当主线程空闲时（即当前执行栈清空），事件循环会检查任务队列，并将到期的回调函数推入执行栈中执行。

使用setTimeout修正按钮闪烁示例：

    
    
    
    



    点击我闪烁

    

在这个修正后的例子中：

1. 用户点击按钮。
2. highlightButtonCorrectly函数被调用。
3. buttonElement.style.backgroundColor = "yellow"; 立即执行，并将背景色设置为黄色。
4. setTimeout(() => { ... }, 200); 被调用。它会安排一个任务：在200毫秒后执行箭头函数中的代码。
5. 主线程立即空闲下来，浏览器有机会更新UI，此时用户会看到按钮变为黄色。
6. 200毫秒后，setTimeout中安排的任务被事件循环取出并执行，将按钮背景色设置为红色。
7. 浏览器再次更新UI，用户看到按钮变为红色。

这样就实现了预期的“先变黄，等待0.2秒，再变红”的效果，并且整个过程中页面不会卡顿。

更多关于setTimeout和异步操作的注意事项

• clearTimeout： 如果你需要在延迟结束前取消一个已安排的任务，可以使用clearTimeout。setTimeout会返回一个定时器ID，你可以用它来取消：

  const timerId = setTimeout(() => {
      console.log("这个消息可能不会显示");
  }, 5000);
  
  // 在5秒内取消定时器
  clearTimeout(timerId);

• setInterval： 如果你需要周期性地重复执行某个任务，可以使用setInterval。它与setTimeout类似，但会每隔指定时间重复执行回调函数，直到被clearInterval取消。

  let count = 0;
  const intervalId = setInterval(() => {
      console.log(`每秒执行一次，计数：${++count}`);
      if (count >= 5) {
          clearInterval(intervalId); // 达到5次后停止
      }
  }, 1000);

• 异步的本质： 理解setTimeout的关键在于它是异步的。它不会暂停当前代码的执行流。如果你有依赖于延迟操作结果的代码，需要将其放在回调函数内部，或者使用更现代的异步编程模式，如Promises和async/await。

总结

在JavaScript的浏览器环境中，为了实现延迟执行而不阻塞用户界面，我们必须避免使用同步的sleep函数。setTimeout是实现非阻塞延迟的正确且标准的方法，它通过将任务调度到事件队列中，允许主线程在等待期间继续处理UI更新和用户交互。掌握setTimeout的用法是编写响应式、流畅Web应用的基础。

到这里，我们也就讲完了《JavaScript延迟执行：setTimeout非阻塞用法解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！