防抖
在事件被触发 n 秒后再执行回调，如果这 n 秒内又被触发，则重新计时。
- 应用
- 搜索框输入联想，用防抖来节约请求资源；
- 在监听滚动事件时，加上防抖来判断滚动停止后的状态；
const debounce = (fn, delay) => {
let timeoutId = null;
return (args) => {
if(!!timeoutId){
clearTimeout(timeoutId)
}
timeoutId = setTimeout(() => {
fn(args)
}, delay);
}
}
节流
在一个单位时间内，只触发一次函数，如果这个单位时间内触发了多次，则只有一次生效。
- 应用
- 鼠标不断点击，单位时间内只触发一次（比如游戏的射击速度，按住鼠标射击，也只是在单位时间内射出一次）
function throttle(fn, interval = 300) {
let canRun = true;
return function () {
if (!canRun) return;
canRun = false;
setTimeout(() => {
fn.apply(this, arguments);
canRun = true;
}, interval);
};
}
