1

私は検索して検索しましたが、私はこの人に空っぽになっています。ヘルプ！JQuery on() を使用してキーアップ イベントの入力フィールド (#filter_query) を監視しています。ユーザーがこの入力フィールドにテキストを打ち込むと、on() が setTimeout() をトリガーし、次にサイトの検索機能をトリガーします。ユーザーが入力フィールドに入力し続けた場合に検索が開始されないようにしようとしているため、clearTimeout() が発生します。何らかの理由で、タイムアウト ID が clearTimeout に対して保持されておらず、毎回新しい ID が生成されています。

これが私のコードです：

$(document).on('keyup', '#filter_query', function (event) {
    var iTimeoutID,
        iTypingDelay = 800,
        sFilterVal = $.trim($('#filter_query').val()),
        sFilterCat = $('#filter_catagory').val(),
        sFilterCol = $('#filter_col').val();

    clearTimeout(iTimeoutID);

    if (sFilterVal !== "") {
        iTimeoutID = setTimeout(
                    function () {
                        searchFunction();
                    },
                    iTypingDelay
                    );
    }
});

上記のコードでは、clearTimeout() に関係なく、検索関数が数回起動されています。ありがとうございました！

4

2 に答える 2

0

variable を定義しているためvar iTimeoutID、これはグローバル変数ではなく、その関数内でのみアクセスできることを意味します。したがって、関数が再度呼び出されると、新しい変数が作成されます。

variable を宣言しないことで修正できるはずですvar iTimeoutID。

私が間違っているかもしれないので、もしそうなら、誰かが私を訂正してください。

于 2012-04-03T21:12:00.530 に答える
0

YouriTimeoutIDは.on()イベント ハンドラー関数のローカル変数であるため、その関数が完了するたびに破棄され、次回再作成されます。あるイベントから次のイベントまで生き残ることができるように、その範囲からより高いレベルまたはグローバル レベルに移動します。

このようにできます。

var iTimeoutID = null;
$(document).on('keyup', '#filter_query', function (event) {
    var iTypingDelay = 800,
        sFilterVal = $.trim($('#filter_query').val()),
        sFilterCat = $('#filter_catagory').val(),
        sFilterCol = $('#filter_col').val();

    if (iTimeoutID) {
        clearTimeout(iTimeoutID);
        iTimeoutID = null;
    }

    if (sFilterVal !== "") {
        iTimeoutID = setTimeout(function() {
            iTimeoutID = null;
            searchFunction();
        }, iTypingDelay);
    }
});

グローバル変数を避けたい場合、またはこれらが複数ある場合は、jQuery を使用して、次の.data()ようにタイマー ID をオブジェクトに保存できます。

$(document).on('keyup', '#filter_query', function (event) {
    var self = $(this);
    var iTimeoutID = self.data("timerID") || null;
    var iTypingDelay = 800,
        sFilterVal = $.trim($('#filter_query').val()),
        sFilterCat = $('#filter_catagory').val(),
        sFilterCol = $('#filter_col').val();

    if (iTimeoutID) {
        clearTimeout(iTimeoutID);
        iTimeoutID = null;
    }

    if (sFilterVal !== "") {
        iTimeoutID = setTimeout(function() {
            self.data("timerID", null);
            searchFunction();
        }, iTypingDelay);
    }
    self.data("timerID", iTimeoutID);
});

以下は、自己実行関数を使用して、グローバルにならずにイベント ハンドラー全体で存続できるいくつかの変数のシェルとして機能する別のバージョンです。

(function() () {
    var iTimeoutID = null;
    $(document).on('keyup', '#filter_query', function (event) {
        var iTypingDelay = 800,
            sFilterVal = $.trim($('#filter_query').val()),
            sFilterCat = $('#filter_catagory').val(),
            sFilterCol = $('#filter_col').val();

        if (iTimeoutID) {
            clearTimeout(iTimeoutID);
            iTimeoutID = null;
        }

        if (sFilterVal !== "") {
            iTimeoutID = setTimeout(function() {
                iTimeoutID = null;
                searchFunction();
            }, iTypingDelay);
        }
    });
})();

これが迅速で、他のコードと競合する可能性がほとんどなく、イベント ハンドラーによって提供されるオブジェクトが 1 つしかない場合は、最初のオプションで問題ありません。

.on()イベント ハンドラーが複数のオブジェクトを提供し、それぞれが独自の状態を追跡する必要がある場合、2 番目のオプションが最適です。

同じイベント ハンドラーに複数のオブジェクトがない場合、新しいグローバル変数を追加しないようにする最も簡単な方法は 3 番目のオプションです。

于 2012-04-03T21:12:04.773 に答える