我有一個由兩個按鈕 (-/ ) 包圍的輸入數字，以便從該輸入中添加或洗掉數量。在數量之后，我有一個提交按鈕，該按鈕從更新購物車中產品數量的模塊中啟動ajax 代碼。
如何在用戶停止單擊/更改此輸入的值（以避免多次呼叫）后 1.5 秒后觸發此按鈕，并在 ajax 呼叫完成時進行攔截，以便用戶可以重用輸入？
這就是我增加輸入值并開始使用的方式。增加值后我找不到這樣做的邏輯......
let currentAdding = false;
$(document).on('click', '[data-action="more"]', function() {
let input = $(this).siblings('input[type="number"]');
let val = input.val();
let total = parseInt(val) parseInt(1);
input.val(total)
if (currentAdding === false) {
$(this).parents('form').find('input[type="submit"]').trigger('click') //this click trigger an ajax call from a module
//set currentAdding after the ajax is done
currentAdding = true;
}
});
uj5u.com熱心網友回復：
您可以在 javascript 中使用稱為去抖動的東西。創建一個名為 debounce 的函式
function debounce(func, delay) {
var debounceTimer
return function() {
var context = this
var args = arguments
clearTimeout(debounceTimer)
debounceTimer = setTimeout(function() { func.apply(context, args); }, delay);
}
}
現在你可以像這樣修改你的事件處理程式
let currentAdding = false;
$(document).on('click','[data-action="more"]', debounce(function() {
let input = $(this).siblings('input[type="number"]');
let val = input.val();
let total = parseInt(val) parseInt(1);
input.val(total)
if(currentAdding === false) {
$(this).parents('form').find('input[type="submit"]').trigger('click') //this click trigger an ajax call from a module
//set currentAdding after the ajax is done
currentAdding = true;
}, 1500); // 1.5 seconds delay
});
您可以在此處閱讀有關去抖動的更多資訊
uj5u.com熱心網友回復：
我最終得到了這個解決方案：
let currentLess = false;
var typingTimer = null;
var doneTypingInterval = 1000;
$(document).on('click', '[data-action="less"]', function() {
if(typingTimer !== null) {
clearTimeout( typingTimer );
}
console.log('click less')
let button = $(this)
let input = button.siblings('input[type="number"]');
if(button.siblings('.field--name-variations').length > 0) {
input = button.siblings('.field--name-variations').find('input');
}
let val = input.val();
const min = input.attr('min')
let total = parseInt(val)-parseInt(1);
input.val(val === min ? val : total);
typingTimer = setTimeout(function() {
console.log("update")
//if(currentLess === false) {
ajaxAddToCartTrigger(button)
//}
}, doneTypingInterval);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/401251.html
下一篇：從同一個父類的另一個類訪問物件