Задержка события клика jQuery, когда пользователь перестает нажимать
У нас есть html-ввод с кнопками увеличения и уменьшения рядом, чтобы изменить значение на ввод, щелкнув. Теперь проблема в том, что форма отправляется сразу после клика.
Мы хотим добавить задержку в 1 секунду, когда пользователь перестанет нажимать. Мы уже пробовали функцию задержки, но столкнулись с проблемой, что она напрямую создает задержку в 1 секунду. Поэтому, когда пользователь не готов щелкнуть, через 1 секунду форма все еще отправляется.
Мы хотим изменить это, чтобы форма отправлялась только через 1 секунду после того, как пользователь перестанет нажимать.
Как мы можем этого добиться?
HTML:
<div class = "product-cart-qty-item" data-th = "<?= $block->escapeHtml(__('Qty')) ?>">
<div class = "product-cart-qty-block">
<button type = "button" id = "<?= /* @escapeNotVerified */ $_item->getId() ?>-dec" class = "decreaseQty"><i class = "far fa-minus"></i></button>
<input id = "cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
name = "cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
data-cart-item-id = "<?= /* @escapeNotVerified */ $_item->getSku() ?>"
value = "<?= /* @escapeNotVerified */ $block->getQty() ?>"
type = "number"
size = "4"
title = "<?= $block->escapeHtml(__('Qty')) ?>"
class = "input-text qty"
data-validate = "{required:true,'validate-greater-than-zero':true}">
<button type = "button" id = "<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class = "increaseQty"><i class = "far fa-plus"></i></button>
</div>
</div>
jQuery:
$('#<?php echo $_item->getId();?>-upt, #<?php echo $_item->getId();?>-dec').on("click",function(){
var $this = $(this);
var ctrl = ($(this).attr('id').replace('-upt','')).replace('-dec','');
var currentQty = $("#cart-"+ctrl+"-qty").val();
if ($this.hasClass('increaseQty')){
var newAdd = parseInt(currentQty)+parseInt(1);
$("#cart-"+ctrl+"-qty").val(newAdd);
$('form#form-validate').submit();
}else{
if (currentQty>1){
var newAdd = parseInt(currentQty)-parseInt(1);
$("#cart-"+ctrl+"-qty").val(newAdd);
$('form#form-validate').submit();
}
}
});
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Трудно отредактировать ваш код, чтобы заставить его работать в примере, потому что в нем так много PHP. Однако вот упрощенный пример, когда вы нажимаете кнопку, чтобы увеличить число, и после задержки при прекращении нажатия отображается сообщение. Я думаю, вы можете адаптировать это в свой код.
В основном при нажатии вам нужно запустить таймер и сохранить его. При каждом щелчке вы также должны очищать все предыдущие таймеры и повторно сохранять новый таймер в той же переменной.
var $input = $('#the-number');
var $btnDecrease = $('#decrease');
var $btnIncrease = $('#increase');
var timer = null;
$btnDecrease.on('click', function(){
var num = parseInt($input.val(), 10);
$input.val(num - 1);
beginSubmitDelay();
});
$btnIncrease.on('click', function(){
var num = parseInt($input.val(), 10);
$input.val(num + 1);
beginSubmitDelay();
});
function beginSubmitDelay(){
clearTimeout(timer);
timer = setTimeout(function(){
$('#message').show();
}, 1000);
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' readonly id='the-number' value='0'>
<button type='button' id='decrease'>-</button>
<button type='button' id='increase'>+</button>
<h4 id='message' style='color:green; display:none;'>Submitted!</h4>Это работает лучше, чем "стандартный" debounce - debounce обычно используется для проглатывания/пропуска/игнорирования событий, кроме последнего, например, при прокрутке или запуске поиска, когда пользователь перестал печатать. В этом случае OP нужны эти события. (хотя это можно было бы сделать с двумя событиями - одно отклонено, а другое изменило значение)
Базовая функция устранения дребезга с использованием тайм-аута и сброса ее, когда пользователь выполняет другое действие.
let submitTimer;
$(".yourSelector").on("click", function () {
// cancel last submission
if (submitTimer) window.clearTimeout(submitTimer);
// your inc/dec logic
// call submit after a delay
submitTimer = window.setTimeout(function () {
$('form#form-validate').submit();
}, 1000);
});
Чтобы сделать это с помощью многоразового метода устранения дребезга
const debounce => (func, timeout) {
let timer;
return (...args) => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
};
const submitForm = debounce(() => $('form#form-validate').submit(), 1000);
$(".yourSelector").on("click", () => {
// your inc/dec logic
submitForm();
});
delay= «пауза». Термин, который вы ищете, этоdebounce- на SO есть различные решения.