应用场景:
对于支付按钮或者收藏等,需进行一定处理,防止短时间内重复点击,多次请求接口,造成不必要资源浪费。
解决方案:
-
css样式:对于button按钮,可以使用setAttribute(‘disabled’, xxx)和removeAttribute(‘disabled’)来禁止用和恢复。
-
防抖:立即执行一次,例如按钮防抖,防止用户多次点击(下一次调用必须与前一次调用的时间间隔大于wait才会触发)。
function debounce(func, wait, immediate) {
var timeout;
return function (...args) {
if (timeout) {
clearTimeout(timeout);
}
if (immediate) {
// 如果已经执行过,不再执行
var callNow = !timeout;
timeout = setTimeout(function () {
timeout = null; //下一次调用必须与前一次调用的时间间隔大于wait才会触发
}, wait);
if (callNow) func.apply(this, args);
} else {
timeout = setTimeout(() => func.apply(this, args), wait);
}
};