时间戳

首页 > 解决方案 > 嵌套的 setTimeout 方法如何按顺序执行？

javascript - 嵌套的 setTimeout 方法如何按顺序执行？

问题描述

    setTimeout(() => {
        console.log(1);
        setTimeout(() => {
            console.log(2);
            setTimeout(() => {
                console.log(3);
            }, 1000);
        }, 1000);
    }, 1000)

为什么此代码允许您按顺序每隔一秒控制台登录一次？我预计代码会同时运行 1、2、3，因为所有计时器都设置为 1000 毫秒。

标签： javascriptasynchronouscallbacksettimeoutnest

解决方案

传递给的延迟参数是执行回调函数之前setTimeout所需的最短时间；这不是回调运行的实际时间。

回调按照其计时器到期的顺序运行，并被推入任务队列。当堆栈为空时，它们从任务队列中被推送到调用堆栈。

在任务队列中首先推送的回调是第一个被推送到调用堆栈的回调。因此，它是第一个被执行的。

为什么此代码允许您按顺序每隔一秒控制台登录一次？

那是因为每个内部setTimeout回调还需要考虑 wrapper 的延迟setTimeout。

第二个的回调函数setTimeout有 2 秒的延迟，因为第二个setTimeout是在第一个计时器在 1 秒后到期后调用的。

同样，最内层setTimeout有3秒的延迟。

推荐阅读