8

うまくいけば、これは誰かが理解するための迅速かつ簡単なものです. 私は多くのjavascript/jqueryを使用するのにかなり慣れていません。データベースから顧客名を引き出して、ユーザーが顧客IDの入力を終了したときに表示するように次のように設定しています。

すべてうまく機能しますが、各keyupで検索します。ぼかしに変更できることはわかっていますが、遅れて、進行中に検索したいと思います。

現在のコードは次のとおりです。

function postData(){
    var id = $('#id').val();

    $.post('inc/repairs/events-backend.php',{id:id},   
        function(data){
        $("#display_customer").html(data);
    });
    return false;
}

$(function() {
    $("#id").bind('keyup',function() {postData()});
});

ご覧のとおり、各キーアップにバインドされています。つまり、検索が速すぎると、まだ読み込まれているため、間違った結果が返される可能性があります。（つまり、一致するものが見つからない場合、エラーが表示され、十分に速く入力すると、ユーザーはバックスペースして最後の数字を再入力する必要があります）

誰かが既存のコードに遅延を追加するのを手伝ってくれませんか? 可能であれば、あなたが行った変更について簡単な説明をしてください.

- - 編集 - -

これは私が完成したコードです、ありがとう！

function postData(){
    var id = $('#id').val();

    $.post('inc/repairs/events-backend.php',{id:id},   
        function(data){
        $("#display_customer").html(data);
    });
    return false;
}

$(function() {
    var timer;
    $("#id").bind('keyup input',function() {
        timer && clearTimeout(timer);
        timer = setTimeout(postData, 300);
    });
});
4

4 に答える 4

8

setTimeout関数とclearTimeout関数を調べる必要があります。

$(function() {
    var timer;
    $("#id").on('keyup',function() {
        timer && clearTimeout(timer);
        timer = setTimeout(postData, 300);
    });
});

基本的には、postData関数をすぐに起動するのではなく、 に渡してsetTimeout、一定時間 (この場合は 300 ミリ秒) 後に起動するようにしています。

このsetTimeout関数はタイマー ID を返します。これを渡してclearTimeout、実行中の呼び出しをキャンセルできます。キーを押すたびに、新しいタイマーを設定する前に、まずタイマーが設定されているかどうかを確認します。ある場合は、新しいタイマーを開始する前に古いタイマーをキャンセルします。

これをさらに強化するために、ユーザーが 300 ミリ秒以上 (タイマーが起動した後、AJAX 要求が返される前) に何かを入力した場合に備えて、キーを押すたびにAJAX 呼び出しを中止することもできます。

PS Ben Alman のthrottle/debounce pluginをチェックしてください。これはここで完全に機能します。

于 2013-01-23T03:20:58.190 に答える
7

アンダースコアのdebounce関数を見てください-これにより、この種の動作が非常に簡単になります。

$(function() {
  $('#id').on('keyup input', _.debounce(postData, 500))
}

このように、への呼び出しは、ユーザーが入力を停止した後（またはデバウンスを設定したもの）postDataにのみ発生します。500mswait

また、キーストロークに加えてコピー/貼り付けなどの追加の変更をキャッチするためにinputイベントに忍び込みます（最新のブラウザーの場合）

于 2013-01-23T03:24:05.850 に答える
2

キーアップ時に検索を少し遅らせますが、実行される順序を予測できないため（または、ajaxのキューを使用できるため）、最後のリクエストを中止する必要もあります。

3つの部分すべてについて説明します。

遅れ

postDataコールバックをでラップしますsetTimeout。setTimeoutasの戻り値を格納し、毎回$("#id").data('timeout')呼び出すようにして、入力された文字の高速文字列ごとにイベントが1回だけ発生するようにします。clearTimeout

アボート

最後のリクエスト$("#id").data('lastRequest')などを保存します。postDataが呼び出されるたびに、を実行し$("#id").data('lastRequest').abort()ます。の戻り値を $.post()そのデータフィールドに格納します。エラーを防ぐには、次のように初期化します。

$("#id").data('lastRequest', {abort: function () {}));

列

$("#id").data('lastRequest', true);
...
$.when($("#id").data('lastRequest')).then(function () {
   $("#id").data('lastRequest', $.post(...));
});
于 2013-01-23T03:23:24.683 に答える
0

より良い方法があるかもしれませんが、これが私の頭のてっぺんから何かがあります：

window.currentKeyup = 0;
$("#id").bind('keyup',function() {
    window.currentKeyup++;
    var keyup = window.currentKeyup;
    setTimeout(function(){
        if( keyup == window.currentKeyup ){
            postData();
        }
    },3000);
});
于 2013-01-23T03:25:18.573 に答える