setTimeout()方法总结

原创已于 2022-04-14 15:47:40 修改 · 4.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-04-14 15:22:39 首次发布

前端技术专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了JavaScript中的setTimeout函数，它提供了一种定时执行代码的机制。通过示例代码展示了setTimeout的基本用法，并解释了其运行原理，强调了EventLoop在其中的作用。同时，文章通过一个具体的程序执行示例，阐述了setTimeout如何在执行栈中与同步任务交互，影响代码执行顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setTimeout

setTimeout 简介

setTimeout是浏览器的js处理引擎或者是nodJs内核帮我们实现的一个方法，它的作用是提供一种定时执行的机制，让使用者可以实现在一个特定的时间后执行一段程序的目的。该函数看起来很简单，使用也很简单，但是它的实现及原理并不简单。

setTimeout 用法

我们可以通过setTimeout实现许多意想不到的功能，比如Promise的实现也依赖setTimeout。大多数情况下我们不必去考虑过多的细节，那么setTimeout的使用就比较简单了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
    <body>
        <script>
            setTimeout("alert('来啦 老弟!')", 3000);
        </script>
    </body>
</html>

setTimeout 原理

setTimeout运行机制是：当程序执行到setTimeout函数时，处理器会将代码移出本次执行程序，等到下一次Event Loop时，再检查是否到了指定的时间。如果到了就执行对应的代码。如果不到，就等到下一轮Event Loop时重新判断。这意味着，setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。
以下程序和图来源于其他博客

const bar = () => console.log('bar');
const baz = () => console.log('baz');
const foo = () => {
    console.log('foo');
    setTimeout(bar, 0);
    baz();
}
foo();