防抖函数:在n秒内只执行最后一次(在触发某个事件后,在下一次触发之前,中间的间隔时间如果超过设置的时间才会发送请求,一直触发就不会发送请求)
应用场景:按钮提交事件,搜索功能,浏览器窗口缩放,表单验证,scroll事件滚动,resize事件
/**
* 防抖 (n秒内只执行最后一次)
* @param fn
* @param delay
* @return {Function}
* @private
*/
export function _debounce(fn, delay) {
var newDelay = delay || 500;
var timer;
return function () {
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
timer = null;
fn.apply(this, args);
}, newDelay);
};
}
防抖动事件_防重复提交_防重复点击js
节流函数:在n秒内只执行一次(如果持续触发某个事件,则每隔n秒执行一次)
应用场景:拖拽,鼠标移动的距离,监听scroll滚动事件
/**
* 节流 (每隔n秒执行一次)
* @param fn
* @param interval
* @return {Function}
* @private
*/
export function _throttle(fn, interval) {
var last;
var timer;
var newInterval = interval || 200;
return function () {
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < newInterval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, newInterval);
} else {
last = now;
fn.apply(th, args);
}
};
}
使用:
// 点击确认提交支付订单
confirmSubmit () {
this._debounce(this.action, 1000)();
}