1

ボタンをクリックすることで、ajax関数によって新しいデータがDIVにロードされる単純なページがあります。そのDIVは、ユーザーが別のボタンをクリックするとフェードアウトし、データがロードされ、DIVが再びフェードインします。問題は、ユーザーがボタンDIVをクリックするとフェードアウトするが、新しいデータがすでにロードされている場合です。

フェードアウトする前に新しいデータがロードされないように、FadeOut関数でコールバックを使用しようとしましたが、役に立ちませんでした。私のコードは以下の通りです：

コールバックによるフェードアウトの影響： 

$("#core").fadeOut(500, processingPages.loadPage(clickedButton));

loadPage関数：

loadPage: function(bottomMenu) { 
            $("#indicator").show();
            $.ajax({url: bottomMenu.attr('href'),
            dataType: 'html',
            timeout: 5000, // 5 seconds
            success: function(html) {
            $("#indicator").hide();
            $("#core").html(html).fadeIn(500);
                        }
                    }

私は何が間違っているのですか？フェードアウトが500ms待機せず、loadpage関数を実行する理由。なぜAjax関数がすぐにトリガーされるのですか？

4

3 に答える 3

1

試す：

$("#core").fadeOut(500, function(){
   processingPages.loadPage(clickedButton);
});
于 2012-07-02T19:28:36.560 に答える
1 
$("#core").fadeOut(500, function() {
    processingPages.loadPage(clickedButton));
});

これはよくある間違いです。関数を渡すつもりですが、実際には関数の戻り値を渡しています。後で実行するように要求するのではなく、すぐに実行しているためです。

私の場合、匿名関数 (関数の戻り値ではない) を渡しています。これは、実行時に (つまり、フェードアウト後に) コードを実行します。

関数参照と関数呼び出しの違いです。

alert //reference to alert function
alert('hello'); //invocation of alert function
于 2012-07-02T19:28:36.600 に答える
0

約束を使用します。物事を本当にシンプルに保ちます。

var fadingOut = $("#core").fadeOut(500).promise()

fadingOut.done(function() {
    processingPages.loadPage(clickedButton)
});

これは簡単な例ですが、この習慣を身につければ、すべてがずっと簡単になります。

プロミスを ajax で使用することもできます。jquery ajax 呼び出しはデフォルトでプロミスを返します。loadPage 関数は次のようになります。

loadPage: function(bottomMenu) { 
    $("#indicator").show();
    var gettingData = $.ajax({url: bottomMenu.attr('href'),
      dataType: 'html',
      timeout: 5000
    });

    gettingData.done(function(html) {
      $("#indicator").hide();
      $("#core").html(html).fadeIn(500);
    });

    gettingData.fail(function() {alert("There was a problem loading your data";});
}
于 2012-07-02T19:55:28.950 に答える