javascript thread

javascript thread

本文关键字：thread javascript      更新时间：2023-09-26

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

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

但是动画运行不流畅。你能以某种方式做到这一点吗，或者在javascript中是不可能的。

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

希望你能理解我的意思。

如果您要一次性添加 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 事件。

例如，

您可以使用 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） 进行动画和元素添加。

相关文章：