短时间内不重复触发一个事件
设置一个门槛值,表示两次 Ajax 通信的最小间隔时间。如果在间隔时间内,发生新的keydown事件,则不触发 Ajax 通信,并且重新开始计时。如果过了指定时间,没有发生新的keydown事件,再将数据发送出去。
这种做法叫做 debounce(防抖动)。假定两次 Ajax 通信的间隔不得小于2500毫秒,上面的代码可以改写成下面这样。
$('textarea').on('keydown', debounce(ajaxAction, 2500));
function debounce(fn, delay){
var timer = null; // 声明计时器
return function() {
var context = this;
var args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
上面代码中,只要在2500毫秒之内,用户再次击键,就会取消上一次的定时器,然后再新建一个定时器。这样就保证了回调函数之间的调用间隔,至少是2500毫秒。
// @有点、小情绪 - 学习后
function throttle(fn, duration, runNow) {
runNow && fn();
let args, timerId;
return function () {
args = [].slice.call(arguments);
if (timerId) return;
timerId = setTimeout(() => {
fn.apply(this, args);
timerId = undefined
}, duration)
}
}
function debounce(fn, duration) {
let timerId;
return function () {
timerId && clearTimeout(timerId)
timerId = setTimeout(() => fn.apply(this, arguments), duration)
}
}
转至 js教程