Идиоматическое событие с задержкой jQuery (только после короткой паузы при наборе текста)? (aka timewatch/typewatch/keywatch)

Вот несколько jQuery для окна поиска, которое я ожидаю, на самом деле является antipattern, и я уверен, что есть намного лучшее решение, для которого я хотел бы обратить внимание:

Я опишу его в комментариях, а затем просто отправлю код, так как комментарии могут быть более понятными и простыми, чем код:

//настроить вызов функции при нажатии клавиши.
//вызов функции имеет задержку до возникновения основного события.
//Когда вызывается функция нажатия клавиши, вытрите все ранее перенесенные события и создайте новый со стандартной скоростью задержки.
//Использовать глобальный для хранения указателя setTimeout.
//clearTimeout любых существующих ранее указателей.
//Запустите новую задержку.

Код:

                // set up a filter function call on keypress.
                $('#supplier-select-filter').keypress(function (){
                    // Currently, resets a delay on an eventual filtering action every keypress.
                    filterSuppliers(.3, this);
                });

                // Delayed filter that kills all previous filter request.
                function filterSuppliers(delay, inputbox){
                    if(undefined != typeof(document.global_filter_trigger)){
                        clearTimeout(document.global_filter_trigger);
                        // clearTimeout any pre-existing pointers.
                    }
                    // Use a global to store the setTimeout pointer.
                    document.global_filter_trigger = setTimeout(function (){
                        var mask = $(inputbox).val();
                        $('#user_id').load("supplier.php?action=ajax_getsuppliers_html&mask="+escape(mask)); 
                    }, 1000*delay); 
                    // Finally, after delay is reached, display the filter results.             
                }

Проблемы:

В поле ввода, где поисковый запрос может состоять в среднем из 10 символов, это 10 вызовов setTimeout за полсекунды, которые, как представляется, являются тяжелыми процессорами, а в моем тестировании вызывает некоторые заметные проблемы с производительностью, поэтому, надеюсь есть более чистая альтернатива?

.load() проще, чем принимать в JSON, а затем генерировать html из json, но, может быть, есть лучший инструмент?

.keypress(), похоже, не всегда срабатывает при таких вещах, как удаление backspace и другие необходимые вещи, поэтому, возможно, использование keypress() в этом поле ввода не является идеальным?

Ответ 1

Я часто использую следующий подход: простая функция для выполнения обратного вызова после того, как пользователь прекратил печатать в течение определенного времени::

$(selector).keyup(function () {
  typewatch(function () {
    // executed only 500 ms after the last keyup event.
  }, 500);
});

Реализация:

var typewatch = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

Я думаю, что этот подход очень прост, и он не подразумевает глобальных переменных.

Для более сложных применений посмотрите на jQuery TypeWatch Plugin.

Ответ 2

Взгляните на отличный плагин для изменения текста от Zurb, поставщиков товаров самого высокого качества jQuery.

Ответ 3

Это более хороший способ сделать это, не используя плагин:

var timeout;
$('input[type=text]').keypress(function() {
if(timeout) {
    clearTimeout(timeout);
    timeout = null;
}

timeout = setTimeout(myFunction, 5000)
})