Как отложить обработчик .keyup (), пока пользователь не перестанет печатать?

Question

У меня есть поле поиска. Прямо сейчас он ищет все ключи. Поэтому, если кто-то наберет «Windows», он выполнит поиск с помощью AJAX для каждого ключа: «W», «Wi», «Win», «Wind», «Windo», «Window», «Windows».

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

Для этой функции нет функции keyup, и я пробовал setTimeout, но она не работала.

Как я могу это сделать?

Answer 1

Видел это сегодня немного поздно, но просто хочу поместить это здесь на случай, если кому-то еще понадобится. просто разделите функцию, чтобы сделать ее многоразовой. код ниже будет ждать 1/2 секунды после ввода остановки.

    var timeOutVar
$(selector).on('keyup', function() {

                    clearTimeout(timeOutVar);
                    timeOutVar= setTimeout(function(){ console.log("Hello"); }, 500);
                });

Answer 2

Ну, я также сделал кусок кода для предельной высокочастотной причины запроса ajax от Keyup / Keydown. Проверьте это:

https://github.com/raincious/jQueue

Сделайте ваш запрос так:

var q = new jQueue(function(type, name, callback) {
    return $.post("/api/account/user_existed/", {Method: type, Value: name}).done(callback);
}, 'Flush', 1500); // Make sure use Flush mode.

И связать событие, как это:

$('#field-username').keyup(function() {
    q.run('Username', this.val(), function() { /* calling back */ });
});

Answer 3

С ES6 , можно также использовать синтаксис функции стрелки .

В этом примере код задерживает событие keyup на 400 мс после того, как пользователи закончили печатать перед тем, как searchFunc сделает запрос.

const searchbar = document.getElementById('searchBar');
const searchFunc = // any function

// wait ms (milliseconds) after user stops typing to execute func
const delayKeyUp = (() => {
    let timer = null;
    const delay = (func, ms) => {
        timer ? clearTimeout(timer): null
        timer = setTimeout(func, ms)
    }
    return delay
})();

searchbar.addEventListener('keyup', (e) => {
    const query = e.target.value;
    delayKeyUp(() => {searchFunc(query)}, 400);
})

Answer 4

Пользователь lodash библиотека JavaScript и использование функции _.debounce

changeName: _.debounce(function (val) {
  console.log(val)                
}, 1000)

Answer 5

Взгляните на плагин autocomplete . Я знаю, что это позволяет указать задержку или минимальное количество символов. Даже если вы не используете плагин, просмотр кода даст вам некоторые идеи о том, как его реализовать самостоятельно.