4

jQuery UI autocomplete documentation を見て、キャッシュを使用したコールバックの例を見ています:

$(function() {
    var cache = {}, lastXhr;

    $('#Field').autocomplete({
        minLength: 2,
        delay: 600,
        source: function(request, response) {
            var term = request.term;

            if( term in cache ) {
                response(cache[term]);
                return;
            }

            lastXhr = $.post('LoadData', function(data, status, xhr) {
                cache[term] = data;

                if(xhr === lastXhr) {
                    response(data);
                }
            });
        }
    });
});

このコードは、オートコンプリートを使用するようにフィールドを接続し、既にヒットしたクエリのキャッシュを保存します。次の行が使用されているため、あるクエリが別のクエリよりも長くかかる場合でも、オートコンプリート値が置き換えられません。

if(xhr === lastXhr) {
    response(data);
}

いくつかの文字を入力し始めて、データをクエリするためにサーバーに送られ、一時停止して再び入力を開始すると、サーバーへの別のトリップがトリガーされます。最初のクエリが 2 番目のクエリの後に終了した場合、読み込み中のアイコンは消えることはありません。これは、コールバックを呼び出していないためだと思いresponse()ます。2 番目のリクエストが行われた後で、最初のリクエストをキャンセルする方法はありますか?

4

3 に答える 3

2

投稿する直前に追加lastXhr.abort()してもらえますか？これにより、新しいリクエストを開始するたびに以前のリクエストがキャンセルされます。

$(function() {
    var cache = {}, lastXhr;

    $('#Field').autocomplete({
        minLength: 2,
        delay: 600,
        source: function(request, response) {
            var term = request.term;

            if( term in cache ) {
                response(cache[term]);
                return;
            }

            // Abort previous access if one is defined
            if (typeof lastXhr !== 'undefined' && lastXhr.hasOwnProperty("abort")) {
                lastXhr.abort();
            }

            lastXhr = $.post('LoadData', function(data, status, xhr) {
                cache[term] = data;

                if(xhr === lastXhr) {
                    response(data);
                    // Set to undefined, we are done:
                    // helps when deciding to abort
                    lastXhr = undefined;
                }
            });
        }
    });
});
于 2012-04-04T19:40:25.240 に答える
1

リクエストとともに最終結果をキャッシュします。その後、応答コールバックが毎回呼び出されることを確認でき、クエリが同期から戻ってくるかどうかに関係なく、lastData によって正しいデータが使用されることが保証されます。

次のように:

$(function() {
    var cache = {}, lastXhr,lastData;

    $('#Field').autocomplete({
        minLength: 2,
        delay: 600,
        source: function(request, response) {
            var term = request.term;

            if( term in cache ) {
                response(cache[term]);
                return;
            }

            lastXhr = $.post('LoadData', function(data, status, xhr) {
                cache[term] = data;

                if(xhr === lastXhr) {
                    response(data);
                    // Store the latest data
                    lastData = data;

                }
                else
                {
                    // Queries have come back out of sync - this isn't the last one
                    // but we need to call response to stop the spinner
                    response(lastData);
                }
            });
        }
    });
 });
于 2012-11-01T23:14:14.110 に答える