解决的问题
为了限制函数的执行频次，以优化高频率触发函数导致的响应速度跟不上触发频率，出现延迟、假死或卡顿的现象。
主要用于对DOM Events的处理，常见场景：
- window对象的scroll事件
- 文字输入、自动完成的keyup事件等
防抖（debounce）
思路
当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作，则将重新计算执行时间。
如下图示，设定事件触发后等2格时间执行被防抖函数，可看出不管事件连续触发多少次、持续多长时间，只要间隔始终小于2格，被防抖函数只会执行一次，即最后一次事件2格后执行。
防抖示意图
缺点
若一直触发动作，则函数一直不会被执行。
应用场景
搜索框输入实时触发搜索；
实现：简单版
// 每次都清除上一次的定时任务，开启一个新的执行任务。
const debounce = (fn, wait) => {
let timer = null;
return () => {
clearTimeout(timer);
timer = setTimeout(() => {
fn();
}, wait);
};
};
const log = () => { console.log(1); };
window.onscroll = debounce(log, 500); // 这个例子不太好，页面滚动一般用节流
节流（throttle）
思路
预先设定一个执行周期，在任一个执行周期中，被节流函数最多执行一次。当调用动作的时刻距离上次执行的时间大于等于执行周期，则执行该动作，然后进入下一个新周期。
应用场景
监听页面滚动等。
实现：简单版
const throttle = (fn, wait, time) => {
let previous = null; // 记录上一次运行的时间
let timer = null;
return () => {
let now = +new Date();
if (!previous) previous = now;
clearTimeOut(timer);
// 若上一次执行时间与当前时间差大于预设的执行间隔，主动执行一次
if (now - prvious > time) {
fn();
previous = now;
} else {
timer = setTimeout(function() {
fn();
}, wait);
}
};
};
const log = () => { console.log(1); };
window.onscroll = throttle(log, 500, 2000);
参考
《由浅入深学习lodash的debounce函数》
《函数节流与函数防抖》
《Debouncing and Throttling Explained Through Examples》
