3

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

この例では、[実行]をクリックすると。divは、1000のhelloを取得した後にアニメーション化されます。最初にforループにコメントし、もう1つのforループにコメントすると、アニメーションは追加が実行される前に開始されます。

しかし、アニメーションはスムーズに実行されていません。何らかの方法でこれを実現できますか、それともjavascriptでは不可能ですか。

アニメーション化されている間にdivDocumentをロードしたい。ライブで追加する必要があるという意味ではないが、アニメーションを台無しにしたくないし、アニメーションの前に1000レコードを追加して時間を無駄にしたくない。開始しました。

あなたが私の質問を理解することを願っています。

4

2 に答える 2

4

一度に 10000 個の要素を追加しようとすると、完了するまで他のアクティビティがブロックされます。

アニメーションを開始してから追加を行うと、システムが div の追加でしばらくビジー状態になるため、ぎくしゃくした状態になり、突然、アニメーションが遅れていることに気づき、急いで追いつく必要があります。要素の追加によってアニメーションがインターリーブされないことに注意してください。

これを解決する最善の方法は、要素を batches に追加し、毎回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 に答える