jquery - ユーザーが入力をやめるまで関数を待つ

Question

入力中にユーザーが ajax 呼び出しを行っています。問題は、入力されるすべての文字に対して呼び出しが行われることです。そのため、タイムアウトを次のように設定します。

$(input).live('keyup', function(e){

setTimeout(function(){ 

var xx = $(input).val();
doSearch(xx); 

}, 400); 

});

400 ミリ秒待機しますが、キーアップごとに実行されます。これを変更して、最後に入力された文字の約 400 ミリ秒後に ajax 呼び出しを「1 回」だけ行うにはどうすればよいですか?

(私は過去に「遅延」を使用しましたが、それは私のスクリプトではまったく機能しません...)

score 23 · Accepted Answer

timer = 0;
function mySearch (){ 
    var xx = $(input).val();
    doSearch(xx); 
}
$(input).live('keyup', function(e){
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(mySearch, 400); 
});

関数を名前付き関数に移動して、複数回呼び出す方がよいでしょう

score 4 · Accepted Answer

新しいキーが押されるたびにタイマーをリセットする必要があります。

(function() {
    var timer = null;

    $(input).live('keyup', function(e) {
        timer = setTimeout(..., 400);
    });

    $(input).live('keydown', function(e) {
        clearTimeout(timer);
    });
)();

関数式は、timer変数のスコープがそれを必要とする 2 つの関数に限定されるようにするために使用されます。

score 0 · Accepted Answer

ミックスに新しい一時的な「何か」を追加しても問題がない限り、このコンテキストで再び使用できると思います。delay()これはあなたのために働きますか？

$(input).live('keyup', function(e) {
    if (!$(input).hasClass("outRunningAJob")) {
        var xx = $(input).val();
        $(input).addClass("outRunningAJob");
        doSearch(xx);
        $(input).delay(400).queue(function() {
            $(this).removeClass("outRunningAJob");
            $(this).dequeue();
        });
    }
});

score 0 · Accepted Answer

次の実装が簡単であることがわかりました。

$(input).on('keyup', function () {
    delay(function () {
        if (input).val() !== '' && $(input).val() !== $(input).attr('searchString')) {
            // make the AJAX call at this time
            // Store the value sent so we can compare when JSON returns
            $(input).attr('searchString', $(input).val());

            namepicker2_Search_Prep(input);
        }
    }, 500);
});

現在の文字列を保存することにより、ユーザーが入力を停止したことを確認できます。次に、関数を安全に呼び出して、必要な処理を行うことができます。

jquery - ユーザーが入力をやめるまで関数を待つ

4 に答える 4

Related

Reference