Как остановить выполнение текущего потока обработчика событий, когда последующие события одновременно вызывают один и тот же обработчик?

Question

• У меня есть входной текст, который используется для фильтрации и сортировки содержимого выпадающего списка.
• Функция фильтрации / выбора filterSort() вызывается на keyup для входного текста.

Код

$(inputTextField).keyup(function() 
{
     //lot of logic to filter the options of a select dropdown and sort them based on the text of inputTextField


});

Задача
Логика фильтрации / сортировки работает нормально. Но я понял, что пока пользователь печатает, несколько потоков исполняют код внутри filterSort(). Итак, я хочу остановить выполнение кода внутри keyup(), если произошел другой keyup(), потому что нет необходимости продолжать работу с более старым потоком, так как его результаты в любом случае будут отброшены. Никогда не сталкивался с такой ситуацией. Как мне это сделать?

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

Answer 1

Решением будет задержка операции фильтрации с помощью setTimeout () и сброс таймера каждый раз, когда пользователь нажимает клавишу.Метод jQuery data () может использоваться для отслеживания идентификатора таймера:

$(inputTextField).keyup(function() {
    var $this = $(this);
    var timer = $this.data("timer");
    if (timer) {
        window.clearTimeout(timer);
    }
    $this.data("timer", window.setTimeout(function() {
        // Lots of logic to filter and sort the options...
    }, 250));
});