debounce 应用场景
函数去抖就是对于一定时间段的连续的函数调用，只让其执行一次。
- 每次 resize/scroll 触发统计事件
- 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）
/**
* 简单模拟debounce
* @param fn
* @param delay
* @returns {Function}
*/
debounce = function (fn, delay) {
let timer = undefined
return function () {
if(timer!==undefined){
window.clearTimeout(timer)
}
timer =setTimeout(()=>{
fn.call()
timer = undefined
},delay*1000)
}
}
var f1 = debounce(()=>{
console.log(1)
},3);
throttle 应用场景
函数节流的核心是，让一个函数不要执行得太频繁，减少一些过快的调用来节流。
哪些时候我们需要间隔一定时间触发回调来控制函数调用频率？
- DOM 元素的拖拽功能实现、计算鼠标移动的距离、Canvas 模拟画板功能（mousemove）
- 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
- 搜索联想（keyup）
- 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次（scroll）
/**
* 简单模拟throttle
* @param fn
* @param delay
* @returns {Function}
*/
throttle=function (fn, delay) {
let cd =false;
return function () {
if(cd){return}
fn.call()
cd=true
console.log(new Date())
setTimeout(()=>{
cd =false
},delay*1000)
}
};
var f2=throttle(()=>{
console.log(2)
},3);
总结
函数节流和函数去抖的核心：限制某个方法被频繁触发，而一个方法之所以会被频繁触发，大多数情况下是因为 DOM 事件的监听回调，而这也是函数节流以及去抖多数情况下的应用场景
