节流（throttle）和防抖（debounce）是前端面试中非常高频的一道面试题，在实际项目开发中，也有很多实用场景，最后一次梳理这两个概念。
节流
规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。
就像一个水龙头在滴水，可能一次性会滴很多滴，但是我们只希望它每隔 1000ms 滴一滴水，保持这个频率，即我们希望函数在以一个固定的频率重复调用；因此这个方法比较适合应用于动画相关的场景。
原理
原理是通过判断是否到达规定时间来触发函数。
运用场景
- 鼠标不断点击触发，mousedown 事件的执行(单位时间内只触发一次)
- 监听滚动事件，比如是否滑到底部自动加载更多，用节流来判断
代码实现
function throttle(fun, delay) {
let last,
timer;
return function () {
let self = this,
args = arguments,
now = +new Date();
if (last && now < last + delay) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fun.apply(self, args);
}, delay);
} else {
last = now;
fun.apply(self, args);
}
}
}
// 没秒执行一次
const myEvent = throttle(function() {
console.log('开始执行...');
}, 1000);
document.querySelector('input').addEventListener('keyup', myEvent);
防抖
当持续触发事件时，一定时间段内没有再次触发事件，事件处理函数才会执行一次，如果在设定的时间到来之前，又一次触发了事件，就重新开始延时。
想象你将一个弹簧按下，继续加压，继续按下，只会在你最后放手的时候反弹，即我们希望函数只会调用一次，即使在这之前反复调用它，最终也只会调用一次而已。
原理
其原理是维护一个计时器，规定在 delay 时间后触发函数，但是在 delay 时间内再次触发的话，就会取消之前的计时器而重新设置；这样一来，只有最后一次操作能被触发。
运用场景
- input 输入框实现模糊匹配功能，用户在不断输入值时，用防抖来节约请求资源
- window 触发 resize 的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
代码实现
以实现一个简易的模糊匹配功能为例：
function debounce(func, delay) {
let timer;
return function (e) {
clearTimeout(timer);
const self = this;
const args = arguments;
timer = setTimeout(function () {
func.apply(self, args);
}, delay)
};
};
// 最后一次事件触发完成后，1秒后才执行函数
const myEvent = debounce(function (e) {
console.log('开始请求数据...')
}, 1000);
// 绑定监听
document.querySelector("input").addEventListener('input', myEvent);
总结
函数节流是不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。
网友评论