0

div の内容を変更するのに問題があります。私が達成したいのは、アニメーションが終了するのを待ってから、コンテンツを変更してアニメーションを起動し、新しい情報を明らかにすることです。このコードはときどき機能します。つまり、ハングすることがあります (isWorking が false になることはありません。これは、アニメーションがフリーズしたり、アニメーションが while 内の一定のループから終了する時間がないためです)。その後、コンテンツを変更しますか？(下に表示されている方法では、アニメーションの進行中に新しいコンテンツを参照できるため、エンド ユーザーの時間を節約できます。) アニメーションの終了をキャッチする方法はありますか?

 function DesignResults(InnerHTML) {
            while(isWorking){
            }
            $("#holder").html(InnerHTML);
            ShowSearch(true);
    }
    var isWorking = false;
    function ShowSearch(show) {
            isWorking = true;
            var outer = $("#outer");
            var inner = $("#inner");
            var height = 0;
            if (show == true)
                height = inner.outerHeight();
            var loaderHeight
            if (height > 0) {
                loaderHeight = 0;
            } else {
                loaderHeight = 31;
            }
            outer.animate({
                'height': height + "px"
            }, 1600, function () {
                $("#loading").animate({ 'height': loaderHeight + "px" }, 900, function () { });
                isWorking = false;
            });
    }

$(elem).is(':animated') は、アニメーションがまだ進行中の場合に表示されることを理解していますが、その間の絶え間ないループのためにすべてがフリーズします。誰かが私を正しい方向に向けることができますか?

編集：私は誤解されていると思います。達成したい計画は次のとおりです。

  1. アニメーションの非表示を開始します。
  2. アニメーションが非表示になっている間、コンテンツを取得するために別の関数を起動しています。コンテンツをより速く取得する場合は、アニメーションが終了するのを待ってから、コンテンツを変更してレイヤーを再度表示します。データが返されるまでに 1 秒以上かかる場合、ここでは問題はありません

あなたが提案したように、アニメーションが完了した後にそれを行うことができることに同意しますが、アニメーションの実行時間をほぼ 1 秒に設定し、その時間をデータベースからデータを取得するために使用できます。最も効果的なコードを探しています。

4

2 に答える 2

4

この関数の最後のパラメーター:

$("#loading").animate({ 'height': loaderHeight + "px" }, 900, function () { });

「完了」機能です。この関数は、アニメーションが完了すると呼び出されます。

したがって、この関数が完了したら、次のように何かを実行できます。

$("#loading").animate({ 'height': loaderHeight + "px" }, 900, function () { 
    alert('animations complete!');
});

- - 編集 - -

編集に基づいて、おそらくこのようなことをしたいと思うでしょう。

  1. 両方が終了したときに通知する変数を用意します。

    var signal = 0;

  2. これを使用してコンテンツを変更する機能があります。

    function changeContent() {
    signal++;
    if (signal === 2) {
        // change the content code here
        signal = 0;
    }
}

  3. アニメーションが終了したら、次を呼び出します。

    changeContent();

  4. データを取得したら、次を呼び出します。

    changeContent();

changeContent()いずれかの関数によって が初めて呼び出されると、1 にインクリメントさsignalれて関数を終了します。その後、2 回目には 2 に増加signalします。 以来signal === 2、アニメーションとデータの取得の両方が完了したことがわかっているので、コンテンツを変更できます。

これを行うために整数を使用することの良い点は、コンテンツを変更する前に 3 つ、4 つ、5 つ以上の関数の動作を終了させたい場合です。この場合、 の数値を増やして条件を変更するだけですif (signal === 2)。

于 2013-07-24T14:16:42.417 に答える
1

ここに追加のタスクを追加するだけです

$("#loading").animate({ 'height': loaderHeight + "px" }, 900, function () { /* Change Content */ });

アニメーションの後に実行されるよりも

于 2013-07-24T14:17:07.557 に答える