1.什么是函数防抖
概念:函数防抖(debounce)是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。
2.什么时候会使用函数防抖
前端开发过程中有一些事件onresize,scroll,mousemove 等等,在短时间内会被频繁触发。如果不做限制的话有可能一秒之内执行几十次、几百次,那不仅会浪费计算机资源,还会降低程序运行速度,严重的话甚至造成浏览器卡死、崩溃,这种问题显然是致命的。所以需要我们去减少不必要的执行次数。
3.代码实现
/**
* 防抖
* @param { Function } fn 执行函数
* @param { Number } time 延迟时间
* @param { Boolean } trggleNow 立即触发
*/
function debounce (fn, time, trggleNow) {
var t = null;
var debounced = function () {
var _self = this,
args = arguments;
if (t) {
clearTimeout(t);
}
if (trggleNow) {
var exec = !t;
t = setTimeout(function () {
t = null;
}, time);
if (exec) {
fn.apply(_self, args);
}
} else {
t = setTimeout(function () {
fn.apply(_self, args);
}, time);
}
}
// 清除定时器
debounced.remove = function () {
clearTimeout(t);
t = null;
}
return debounced;
}