Javascript 为什么代码跳过setTimeout，然后才赶上？

目标是在容器边界内的随机位置创建一个div，等待3秒钟，然后销毁该div；冲洗并重复3次。然而，据我所知，结果是，当setTimeout等待3秒钟时，代码继续“循环”，只有在3秒钟之后，setTimeout中的函数才会执行。我是否意外地创建了两个线程

 $(document).ready(function() {
        var $bug = "<div class='bug'><div>";
        var x = 0;

        var timer = setInterval(function() {
            if (x > 3) {
                clearInterval(timer);
            }
            r1 = Math.floor((Math.random() * 270) + 1);
            r2 = Math.floor((Math.random() * 270) + 1);
            $('#container').append("<div class='bug'style='top:" + r1 + "px;left:" + r2 + "px;'></div>")
            x++;

            setTimeout(function() {
                $('.bug').remove();
            }, 3000)

        }, 1000);
    });

$（文档）.ready（函数（）{
var$bug=“”；
var x=0；
var timer=setInterval（函数（）{
如果（x>3）{
清除间隔（计时器）；
}
r1=数学楼层（（数学随机（）*270）+1）；
r2=数学楼层（（数学随机（）*270）+1）；
$（“#容器”）。追加（“”）
x++；
setTimeout（函数（）{
$（'.bug'）.remove（）；
}, 3000)
}, 1000);
});

这将删除页面中的所有

.bug

。您可以通过为其提供另一个具有索引的类来解决此问题：

$('#container').append("<div class='bug bug" + x + "'style='top:" + r1 + "px;left:" + r2 + "px;'></div>")

---

我相信这与事件循环有关，javascript setTimeout函数本质上是非阻塞的，被称为异步函数

---

请参阅：

您将一个计时器嵌套在一个计时器中，由于计时器是异步的，因此无法预测何时会发生什么。在您的例子中，计时器的嵌套特性会导致失控效应

实际上，根本不需要设置超时

有关解释，请参见注释：

$（函数（）{
函数insertRandom（）{
var r1=数学地板（（数学随机（）*270）+1）；
var r2=数学地板（（数学随机（）*270）+1）；
$（“#容器”）。附加（“测试”）
}
//立即插入随机元素
insertRandom（）；
var x=0；//重复计数器
//定期启动代码
var timer=setInterval（函数（）{
//如果我们超过了计数
如果（x>=3）{
//停止代码
清除间隔（计时器）；
//终止函数
返回；
}
//增加计数
x++；
//取出最后一个插入的elmeent
$（'.bug'）.remove（）；
//加入新元素
insertRandom（）；
}, 3000);
});
#容器{边框：1px纯黑色；宽度：300px；高度：300px；}

我考虑过这个问题，但目标是删除几秒钟后生成的bug，这样就永远不会有一系列bug，哈哈，双关语。@brooklynsweb没有一系列bug。看看js fiddle，只是一个关于bug的索引。FelisPhasma:per per your note'.bug'将从屏幕上删除所述类的所有bug。我的回应是，我的目标是在创建bug几秒钟后删除它，这样屏幕上就不会出现多个bug。在这样做的过程中，.bug实际上删除了一组只包含1个bug的bug。然而，我最初的问题与其他问题有关。@brooklynsweb您在创建第一个bug 3秒钟后删除它，但是您的创建循环每秒钟都会触发一次。尝试每4秒创建一个bug。（第一个bug出现在4秒后）这就是我最初的问题所涉及的：因为我触发了bug创建的“循环”中的bug删除，我假设，3秒过后，bug会被删除，只有在这个循环再次开始时。根据下面Sebin的说明，这种行为可能与Javascript的非阻塞特性有关。
$('#container').append("<div class='bug bug" + x + "'style='top:" + r1 + "px;left:" + r2 + "px;'></div>")

$('.bug.bug0').remove();