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

фон

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

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

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

Итак, если они набирают "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 секунды, прежде чем делать то, что я описал.

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

Ответы

Ответ 1

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

var timeoutId = 0;
$('#Search').keypress(function () { 
    clearTimeout(timeoutId); // doesn't matter if it 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 мс тайм-аута.)