Запустить только последнее событие из серии запущенных событий

Question

(это вопрос jQuery / JS)

У меня есть кнопки +/- для количества товара на сайте электронной коммерции.

Нажатие на них изменяет значение числа-поле ввода, а затем запускает событие изменения для этого поля ввода числа (с quantityInput.change()), которое, в свою очередь, запускает ajax для обновления корзины.

Я хочу дать пользователю возможность нажимать кнопкиперед запуском ajax несколько раз.

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

Я ищу способ активировать ajax только при «последнем» щелчке - например, при щелчке, который не имеет последующего щелчка в течение 3 секунд.

Например, если текущее количество для продукта «Apple» равно 1, я хочу разрешить пользователю сделать 3 быстрых клика, чтобы изменить его на 4, и только затем вызвать ajax для обновления корзины.

Опять поток:

Нажмите на кнопки +/- - >> значение числового ввода обновлено - >> инициируется событие изменения (с quantityInput.change()) - >> ajaxназывается.

Спасибо, Асаф

Answer 1

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

let timeout;
quantityInput.on('change', () => {
  clearTimeout(timeout);
  timeout = setTimeout(someFnThatUsesAjax, 3000);
});

(убедитесь, что timeout является постоянным и находится за пределами обработчика)