javascript线程

在本例中，单击“运行”时。该div在获得1000个hellos后，在中设置了动画。 如果我在开始处对for循环进行注释，并在另一个for循环中进行注释，则动画将在附加运行之前开始

但是，动画并不是平稳运行的。你能以某种方式实现这一点吗？或者在javascript中这是不可能的

我希望它在加载divDocument的同时将其设置为动画。我不是说它应该是现场添加，但我不希望它弄乱了动画，我也不想在动画开始前添加1000条记录来浪费时间

---

希望您理解我的问题。

如果要一次性添加10000个元素，它将阻止任何其他活动，直到完成为止

如果启动动画，然后进行添加，这是不稳定的，因为有一段时间系统正忙于添加div，然后突然意识到它在动画上落后了，它必须赶上去。请注意，动画不会随着元素的添加而交错

解决此问题的最佳方法是分批添加元素，每次使用

setTimeout

触发下一批

批处理为后台线程提供运行任何其他事件（如动画处理程序）的时间

有关使用批处理的工作演示，请参见。样本的核心是：

    var n = 0,
        batch = 100;

    function nextBatch() {
        for (var i = 0; i < batch && n < 10000; ++i, ++n) {
            $("#divDocument").append("<div>hello</div>");
        }
        if (n < 10000) {
            setTimeout(nextBatch, 0);
        }
    }

    setTimeout(nextBatch, 0);

var n=0，
批次=100；
函数nextBatch（）{
对于（变量i=0；i

---

它一次添加100个元素，通过调用

setTimeout

允许事件处理线程跳入并处理动画和其他UI事件。

例如，您可以使用setTimeout

$(document).ready(function () {

            $(".openWindow").click(function () {



                setTimeout(function() {

                var divToShow = $("#divDocument");

                var windowWidth = $(window).width();
                var leftOut = (windowWidth * -1);
                var leftIn = windowWidth + 500;

                divToShow.css({ left: leftIn });
                divToShow.show();
                divToShow.animate({ left: 0 }, 400, function () {
                    divToShow.addClass("visibleDiv");
                });


            }, 2000);



                for (var i = 0; i < 10000; i++) {
                    $("#divDocument").append("<div>hello</div>");
                } 


            });



        });

$（文档）.ready（函数（）{
$（“.openWindow”）。单击（函数（）{
setTimeout（函数（）{
var divToShow=$（“#divDocument”）；
var windowWidth=$（window.width（）；
变量leftOut=（窗口宽度*-1）；
var leftIn=窗宽+500；
css（{left:leftIn}）；
divToShow.show（）；
动画（{left:0}，400，函数（）{
divToShow.addClass（“visibleDiv”）；
});
}, 2000);
对于（变量i=0；i<10000；i++）{
$（“#divDocument”）。追加（“hello”）；
} 
});
});

---

若要在添加元素后运行动画，则必须为“附加元素”创建函数，并在此函数末尾调用动画。如果要以异步方式运行，则必须使用setTimeout（func，0）进行动画和元素添加。

这有什么帮助？您只是延迟了动画，没有添加任何元素。您可以从超时功能中移动用于添加元素的代码，所有操作都将正常工作。不，这仍然不起作用。OP的观点是，他希望效果就像DOM添加和动画同时发生一样。您所做的只是将整个动画延迟两秒钟，这实际上比添加元素然后立即启动动画更糟糕。好的，您可以创建附加元素的函数，并在该函数结束时运行动画。函数createEl（callback）{//create elements代码\n callback（）；}createEl（函数（）{//call animation here}）如果要运行此异步，在任何情况下都必须使用setTimeout（func，0）。这将像异步一样工作。你可以使用CSS驱动的动画吗？如果可以的话，可以吗？我的例子可能有点像，因为我用一个div构建了一个SPA，该div从knockout applybinding获取数据。不只是10000个hellos:）所以我看不出我可以批量处理它？在我的页面中，传入div中的结果与另一个页面类似。您认为有解决方案吗。@user1199595这将很棘手-一旦浏览器开始重新呈现页面，因为布局正在更改，您在此期间几乎无能为力。我的主要观点仍然成立，尽管-JS不是正确的多线程（尽管如此），尤其是UI中发生的所有事情都发生在一个线程中。那条线一次只能做一件事。谢谢你的帮助。我必须重新考虑我认为的设计。