线程

Question

http://jsfiddle.net/andersb79/SNTb3/1/

在此示例中，当您单击运行时。在获得 1000 个 hello 后，div 将被动画化。 如果我在开头注释 for 循环并在另一个 for 循环中注释动画在附加运行之前开始。

但随后动画运行不流畅。你能以某种方式让这发生吗？或者在 javascript 中是不可能的。

我希望它在 divDocument 加载动画的同时加载它。我不是说它应该实时添加，但我不希望它弄乱动画，我不想通过在之前添加 1000 条记录来浪费时间动画开始。

希望您理解我的问题。

Answer 1

如果您要一次添加 10000 个元素，它将阻止任何其他事件，直到它完成。

如果您启动动画然后执行添加，它会很不稳定，因为有一段时间系统忙于添加 div，然后突然意识到它落后于动画并且必须 catch 来。请注意，动画不会与元素的添加交错。

解决这个问题的最好方法是分批添加元素，每次使用setTimeout触发下一批。

批处理为后台线程提供时间来运行任何其他事件，例如动画处理程序。

参见 http://jsfiddle.net/alnitak/yETt3/使用批处理的工作演示。样本的核心是这样的:

    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);

一次添加 100 个元素，setTimeout 调用允许事件处理线程跳入并处理动画和其他 UI 事件。