说几个场景。
- 提交按钮1秒内连续多次点击 => 我只想触发一次提交函数 【防抖】
- 实时搜索的时候，我还在打拼音的时候不想立马触发搜索函数，会卡死 => 我想输入完一个词再触发 , 或者解读当我在不停的输入的时候，每隔500ms搜索一下。 【节流】
- 但我滑动过一个页面长度的时候，网页右下角出现一个“回到顶部”的按钮=> scroll太频繁，我不想触发太频繁，可以设置直到滑动结束才判定 【防抖】，也可以滑动时每隔500ms断定一次 【节流】
总结
防抖：是将多次执行变为最后一次执行
节流：是将多次执行变为每隔一段时间执行
JS代码
/**
* 防抖 是将多次执行变为最后一次执行
* @param {*} fn 要执行的函数
* @param {*} delay 响应的毫秒
* @returns
*/
function debounce (fn, delay = 1000) = {
let timer = null
return function() {
if(timer){clearTimeout(timer) }
timer = setTimeout(fn,delay) // 简化写法
}
}
/**
* 节流 是将多次执行变为每隔一段时间执行
* @param {*} fn 要执行的函数
* @param {*} delay 响应的毫秒
* @returns
*/
function throttle(fn, delay = 1000) = {
let timer = null;
return function() {
if(timer) {
return;
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay)
}
}
