3

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

在此示例中，当您单击运行时。得到 1000 次问候后，该 div 被动画化。如果我在开头评论 for 循环并在另一个 for 循环中评论动画在追加运行之前开始。

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

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

希望你能理解我的问题。

4

2 回答 2

4

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

如果你开始动画然后添加，它很生涩，因为有一段时间系统忙于添加 div，然后突然意识到它在动画后面运行，它必须急于赶上。请注意，动画不会与元素的添加交错。

解决这个问题的最好方法是批量添加元素，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 事件。

于 2012-06-26T12:13:47.407 回答
0

例如，您可以使用 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>");
                } 


            });



        });

如果要在添加元素后运行动画，则必须为附加元素创建函数，并在此函数结束时调用动画。如果你想以异步方式运行它，你必须使用 setTimeout(func, 0) 进行动画和元素添加。

于 2012-06-26T12:14:13.980 回答