javascript - javascript setInterval 和 setTimeout 'threads' 如何工作？

Question

让我们考虑这样的 html:

<div class="my-class"></div>

和js(使用jQuery):

var interval = 10;

setInterval(function(){
    //I toggle .my-class 'extra-class' every 10ms
    $(".my-class").toggleClass("extra-class"); 
}, interval);

//then outside interval I'm doing some action on the same item as interval does
$(".my-class").each(function(){
    var t = $(this).addClass("extra-class"); //I'm sure I've added extra-class

    //but now I'm doing some action longer than 10ms
    for (var i = 0; i < 10000; i++) {
        //some long action here that could take more than 10ms
    };

    //can I still be sure now that it have extra-class added in THIS scope
    //it was added in this scope but it is toggled all the time
    console.log( t.hasClass("extra-class") ); 
});

发生的情况是:

• 我每 10 毫秒 都会在 .my-class 上切换 extra-class
• 当我确定我已将额外类添加到某些项目时，我就有了一些范围
• 与在同一范围中相比，我正在执行一些需要更多时间的操作 少于10ms
• 我现在可以确定我的项目仍然具有我在当前添加的类吗？ 范围？

---

如果我可以确定 - 这是否意味着间隔正在等待我的范围完成，即使从上一个间隔过去的时间比它应该等待的时间长？如果某些单一示波器花费的时间比间隔时间多 100 倍怎么办？

如果我不能确定 - 这是否意味着可以在我的作用域代码中间触发间隔操作？

Answer 1

// (A)
var t = $(this).addClass("extra-class"); //I'm sure I've added extra-class

// (B)
// Some long action here that could take more than 10ms
...

// (C)
// can I still be sure now that "this" still has class "extra-class"?

是的。由于 JavasScript 是单线程的，因此只有一个线程依次运行 A、B 和 C。在当前执行的代码完成之前，不会执行其他 JavaScript 代码。

即使您设置了 setInterval 以便在给定时间执行某个函数，该函数也只有在单个线程空闲时才会按时运行。否则，它将必须等待，直到单个线程完成执行其他所有操作。