掘金团队号上线，助你 Offer 临门！ 点击 查看详情
一、 防抖
1、概念
事件被触发n秒后，再去执行回调函数。如果n秒内该事件被重新触发，则重新计时。结果就是将频繁触发的事件合并为一次，且在最后执行。
举个简单例子，一个实时保存数据的输入框，如果不做限制没输入一个字符就会请求一次接口，一段文字输入完估计就能发几百次请求，这样服务器的压力就很大。加上3s的防抖后，只有用户输入完且三秒内没有输入才会调用保存接口，请求次数就会被优化到几次。
2、常见使用场景
- 输入框实时保存
- 输入框表单校验
- window.onresize 页面拉伸触发请求（会导致页面拉伸完毕之后才触发执行对应事件）
3、手写
const debounce1 = (fn, delay) => {
let timer;
return function () {
let ctx = this
// 计时器清零
clearTimeout(timer);
// 重新设置计时器
timer = setTimeout(fn.bind(ctx), delay);
};
}
二、节流
1、概念
设定一个时间范围，在这个时间范围内将多次触发的事件合并为一次执行。如果是一直在触发这个事件，那么就变成每隔一段时间执行一次。
2、常见使用场景
- window.onresize
- window.onscroll
- 鼠标移动触发
3、手写
节流函数支持了额外参数，实现代码如下（一个鼠标移动时显示最终坐标的节流实现）
const getXY = ({layerX, layerY}) => {
console.log({layerX, layerY})
}
function fn(cb, context, args) {
cb.timer && clearTimeout(cb.timer);
cb.timer = setTimeout(function () {
cb.call(context, args)
}, 500);
}
body.addEventListener('mousemove', function (e) {
fn(getXY, window, e)
})
