javascript - "setTimeout(functon(){//do stuff},0)"是否会为其包含的函数导致微小的执行延迟？

Question

出于好奇，我做了一个简单的实验:

• 在使用 JQuery 将点击监听器附加到它之前，我使用 box 类动态生成了一个 div。

• 然后我创建了一个副本，除了这一次，我在生成 box 元素之前添加了一个零超时。

As shown in the JSFiddle ，使用零超时会导致无法触发点击的预期结果事件。

此脚本会导致点击警报。

$(document).ready(function(){

    //setTimeout(function(){
        $(".wrapper").html('<div class="box"></div>');
    //},0)

    $(".box").click(function(){
        console.log("A box was clicked!");
    });

});

这个脚本没有。

$(document).ready(function(){

    setTimeout(function(){
        $(".wrapper").html('<div class="box"></div>');
    },0)

    $(".box").click(function(){
        console.log("A box was clicked!");
    });

});

为什么超时为零会导致(我假设)在通过 JQuery 附加点击事件监听器后生成元素？

setTimeout(functon(){//do stuff},0) 是否会为其包含的函数导致微小的执行延迟？如果是这样，为什么会发生这种情况？

Answer 1

JavaScript 是单线程和基于事件的。 setTimeout() 立即创建一个需要处理的新事件，但当前“事件”(函数/代码)必须首先完成。

摘自 Events and timing in-depth :

When setTimeout gets 0 as the last argument, it attempts to execute the func as soon as possible.

The execution of func goes to the Event queue on the nearest timer tick. Note, that’s not immediately. No actions are performed until the next tick.

其他详细解释:

• How JavaScript Timers Work
• Effect of Setting setTimeout to 0 and Explanation of JavaScript's Single Threaded, Non Blocking I/O, Async Event Driven Model

---

注意:我经常使用这个setTimeout(func, 0)“技巧”来执行必须在 DOM 操作或当前函数完成后运行的代码。