Как отложить функцию KeyPress, когда пользователь печатает, чтобы она не запускала запрос для каждого нажатия клавиши?

Question

фон

У меня есть несколько выпадающих на странице.Если вы измените первое, остальные выпадающие списки будут обновлены в соответствии с тем, что вы выбрали.

В нашем случае мы имеем дело с данными фонда.Итак, первое выпадающее меню - «Все типы фондов».Вы выбираете «Хедж-фонды», и следующий выпадающий список фильтруется по параметрам, которые относятся только к хедж-фондам.

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

Так что, если они введут «USD», второй выпадающий список будет содержать только те опции, в которых есть средства с «USD» в имени.

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

$('#Search').keypress(function () {
    // trigger the updating process
});

Это вызывает поиск для каждого нажатия клавиши.Поэтому, когда я набираю «USD», я сразу получаю 3 запроса - один для «U», один для «US» и один для «USD».

Я попытался установить тайм-аут с этим:

$('#Search').keypress(function () { 
    // I figure 2 seconds is enough to type something meaningful
    setTimeout(getFilteredResultCount(), 2000);
});

но все, что нужно, это подождать 2 секунды, прежде чем делать то, что я описал.

Я уверен, что эта проблема была решена раньше.Кто-нибудь может подсказать, как решить эту проблему?

Answer 1

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

var timeoutId = 0;
$('#Search').keypress(function () { 
    clearTimeout(timeoutId); // doesn't matter if it's 0
    timeoutId = setTimeout(getFilteredResultCount, 500);
    // Note: when passing a function to setTimeout, just pass the function name.
    // If you call the function, like: getFilteredResultCount(), it will execute immediately.
});

(Я бы выбрал время ожидания около 500 мс.)