Код запуска JQuery 2 секунды после последнего нажатия клавиши

Я работаю над функцией автоматического поиска для сайта.

Он использует ajax для запроса api.

В момент ввода 3 символов он будет искать при каждом нажатии клавиши.

Я хочу

Case1:
Пользователь вводит tes
Проходит 2 секунды выполненный поиск
Case2:
Пользователь вводит tes
1 секунда

пользователь пресса t
Прошло 2 секунды
поиск выполняется на тестовом сайте
Case3:
Пользователь вводит tes
1 секунда

пользователь пресса t
Проходит 1,5 секунды
пользовательские прессы я
Проходит 1,5 секунды
пользовательские прессы n
Проходит 1,5 секунды
пользователь пресса g
Прошло 2 секунды
поиск в ходе тестирования

чтобы вы могли видеть, действие поиска выполняется только в том случае, если в течение двух секунд после нажатия клавиши не было нажатий клавиш (или пасты ect).

Моя основная идея:

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

Если они совпадают, то никаких изменений не было. Таким образом, поиск

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

Это единственный/лучший способ сделать это?

Ответ 1

Следующая функция из Remy Sharp сделает трюк:

function throttle(f, delay){
    var timer = null;
    return function(){
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = window.setTimeout(function(){
            f.apply(context, args);
        },
        delay || 500);
    };
}

В предыдущем коде f - это функция, которую вы хотели бы активировать, а delay - количество миллисекунд, ожидающих после последнего вызова (по умолчанию - 500, если не указано). throttle возвращает функцию-оболочку, которая удаляет все существующие таймауты из предыдущих вызовов, а затем устанавливает тайм-аут для delay миллисекунд в будущем для вызова f. Ссылка на arguments возвращаемой функции используется для вызова f с, гарантируя, что f получит ожидаемые аргументы.

Вы должны использовать его следующим образом:

$('#search').keyup(throttle(function(){
    // do the search if criteria is met
}));

Ответ 2

Почти то же самое, за исключением того, что таймер устанавливается только при выполнении условий:

<input id="search" type="text" />
<script>
    var timer, value;
    $('#search').bind('keyup', function() {
        clearTimeout(timer);
        var str = $(this).val();
        if (str.length > 2 && value != str) {
            timer = setTimeout(function() {
                value = str;
                console.log('Perform search for: ', value);
            }, 2000);
        }
    });
</script>