0

私は.load()AJAX コンテンツに広く使用しています。それは素晴らしいですが、もう少しうまくいけばいいのですが：

  1. ユーザーの操作に応じて、同じ div に対して複数の呼び出しを行うと.load()、div に間違ったデータが作成される可能性があります。これは、以前のリクエストが後のリクエストよりもコールバックが遅い場合に発生します。古いコールバックを拒否するものが必要です

  2. .load()ターゲットに CSS クラスを追加して、コールバックの完了後にそのクラスを削除するとよいでしょう。

そのような機能を提供する jQuery 用のライブラリまたはプラグインはありますか? それとも、プラグインの価値がないほど数行で実行できますか?

4

3 に答える 3

2

複数の同時リクエストを防ぐ独自のプラグインを作成するのは非常に簡単です。以下は、AJAX 呼び出しをインターセプトし、未処理のリクエストのリストを保持し、新しいリクエストが着信したときにそれらを中止する単純なプラグインです。

$.fn.preventConcurrentAjax = function() {
    return this.ajaxSend(function(e, jqXHR, settings) {
        $.each($(this).data("pca-pending") || [], function() { this.abort(); });
        $(this).data("pca-pending", [jqXHR]);
    });
};

これを簡単に拡張して、リクエストがキューに入れられたときではなく、リクエストが完了したときにまだ未解決の以前のリクエストをキャンセルすることができます。これを行うには、各リクエストでタイムスタンプも保存する必要があります。

jQuery の.ajaxStart()and.ajaxStop()を使用して、「読み込み中」クラスの切り替えを自明に自動化することもできます。次に例を示します。

$.fn.loadingOnAjax = function() {
    var $self = $(this);
    return this.ajaxStart(function() { $self.addClass("loading"); })
               .ajaxStop(function() { $self.removeClass("loading"); });
};
于 2012-11-13T12:47:46.290 に答える
1

これは、プラグインなしで簡単に実行できます。

function ajaxLoad() {
    $('#result')
        .addClass('isLoading')
        .load('ajax/test.html', function() {
            $('#result').removeClass('isLoading');
        });
}

複数の ajax 呼び出しを停止するには、以下を確認します。

if( ! $('#result').hasClass('isLoading') ) {
    ajaxLoad();
}
于 2012-11-13T12:27:25.933 に答える
1

xhr オブジェクトを使用して、以前のリクエストをキャンセルできます。

( function load( ) {
    var xhr;

    return function( url ) {

        // abort previous request
        if( xhr && xhr.readystate != 4 ) { xhr.abort(); }

        xhr = $.get(url, function (data) {
            $('#id').html(data);
        });
    };
}());

load( url );
于 2012-11-13T13:03:45.117 に答える