优雅实现防抖与节流函数

定义

防抖：

节流：

使用场景

• 搜索框
• 按钮
• 监听滚动
• 频繁使用鼠标

总的来说：任何东西被频繁的调用都有可能需要防抖或者节流去优化

实现方式

防抖

function showLog() {
console.log('show');
}

/*
* 防抖 思路：
* 先开启一个定时任务执行，定时任务完成后则清空；当再调用时，如果定时任务仍存在则清空原来任务，创建新的定时任务
* */
function debounce(fn, space) {
let task = null;
return function (){
if(task) {
clearTimeout(task);
}
task = setTimeout(fn.apply(this, arguments), space);
}
}
// 使用
let debounceShowLog = debounce(showLog, 3000);
debounceShowLog()

节流

/*
* 节流 思路：
* 先开启一个定时任务执行，定时任务完成后则清空，当再调用时，如果定时任务仍存在则不执行任何操作
* */
function throttle(fn, space) {
let task = null;
return function () {
if(!task) {
task = setTimeout(function () {
task = null;
fn.apply(this, arguments);
}, space);
}
}
}

let throttleShowLog = throttle(showLog, 3000);

简单才是真爱