Javascript - JQuery on () проблема с областью clearTimeout

Ваша iTimeoutID является локальной переменной для функции обработчика событий .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() для хранения идентификатора таймера в объекте следующим образом:

$(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);
        }
    });
})();

Если это было что-то быстрое и вероятность конфликта с другим кодом была небольшой, а обработчик событий обслуживал только один объект, то первый вариант вполне подойдет.

Если обработчик событий .on() обслуживал несколько объектов, и каждый из них должен был отслеживать свое собственное состояние, второй вариант идеально подходит для этого.

Если у вас нет нескольких объектов в одном и том же обработчике событий, то третий вариант — это самый простой способ избежать добавления каких-либо новых глобальных переменных.

Поскольку вы определяете переменную var iTimeoutID, это означает, что это не глобальная переменная и доступна только внутри этой функции. Поэтому, когда функция вызывается снова, она создает новую переменную.

Я считаю, что вы сможете исправить это, не объявляя переменную var iTimeoutID.

Я могу ошибаться, так что если это так, кто-нибудь, пожалуйста, поправьте меня.