Запуск функции после setTimeout()

179

09 мая 2018, 03:38

Есть строка поиска. Хочу чтобы при окончании ввода в строку через секунду запускалась(1 раз) функция. Есть код:

$('.block input[name=search]').on("input", function () {
    setTimeout(findUser, 1000);
    function findUser() {
        alert("Hello");
    }
})

Код работает неправильно. Он запускает функцию столько раз сколько я нажму, а мне нужно при окончании ввода и 1 раз. Если есть свои варианты кода то пожалуйста

Answer 1

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

Для этого нужно сохранить предыдущий таймер в переменную:

var timer = null;
$('.block input[name=search]').on("input", function () {
    clearTimeout(timer);
    timer = setTimeout(findUser, 1000);
    function findUser() {
        alert("Hello");
    }
})

Answer 2

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

Получится что-то вроде:

var th;
$('.block input[name=search]').on("input", function () {
    if (th) clearTimeout(th);
    th = setTimeout(findUser, 1000);
    function findUser() {
        alert("Hello");
        th = null;
    }
});