函数防抖和函数节流是在时间轴上控制函数的执行次数
一、函数防抖(debounce)
概念：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；
案例：如果有人进电梯（触发事件），那电梯将在10秒钟后触发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）；
分析1：假设观察的总时间是10秒钟，规定1秒作为一次事件的最小间隔时间，如果触发事件的频率是0.5s/次，那么在函数防抖情况下，回调就没法执行了，因此始终无法等够一秒钟事件就被再次触发了，所以最终没有一次事件是成功的；
函数防抖
分析2：假设观察的总时间是10秒钟，规定1秒作为一次事件的最小间隔时间，如果触发事件的频率是2s/次，那么在函数防抖情况下，每隔2秒执行一次事件，因为2s/次已经大于了规定的最小时间，所以每计时两秒便触发一次；
函数防抖
应用场景：对于函数防抖，有以下几种应用场景，总的来说，适合多次事件一次响应的情况；
- 给按钮加函数防抖防止表单多次提交；
- 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数；
- 判断scroll是否滑到底部，滚动事件+函数防抖；
代码：
// 之所以返回一个函数，因为防抖本身更像是一个函数修饰，所以就做了一次函数柯里化，里面也用到了闭包，闭包的变量是timer
function debounce(fn, wait) {
var timer = null;
return function () {
var context = this
var args = arguments
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function () {
fn.apply(context, args)
}, wait)
}
}
var fn = function () {
console.log('boom')
}
setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发，之后每1000ms触发一次
setInterval(debounce(fn,2000),1000) // 不会触发一次（我把函数防抖看出技能读条，如果读条没完成就用技能，便会失败而且重新读条）
二、函数节流(throttle)
概念：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效；
案例：我们知道目前的一种说法是当1秒内连续播放24张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放中基本是以每秒24张的速度播放的，为什么不播放100张或更多是因为24张就可以满足人类视觉需求的时候，100张就会显得很浪费资源；
分析1：假设观察的总时间是10秒钟，规定1秒作为一次事件的最小间隔时间，如果触发事件的频率是0.5s/次，那么在函数节流的情况下，每一秒钟就有一次触发事件被作废，即最终控制成1s/次；
函数节流
分析2：假设观察的总时间是10秒钟，规定1秒作为一次事件的最小间隔时间，如果触发事件的频率是2s/次，那么在函数节流的情况下，每隔两秒执行一次事件，因为2s/次大于了最小时间规定，所以每一次触发都生效；
函数节流
应用场景：对于函数节流，有以下几种应用场景，总的来说，适合大量事件按时间做平均分配触发；
- 游戏中的刷新率；
- DOM元素拖拽；
- Canvas画笔功能；
// 1s打出一个boom
function throttle(fn, gapTime) {
let _lastTime = null;
return function () {
let _nowTime + = new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
fn();
_lastTime = _nowTime
}
}
}
let fn = ()=>{
console.log('boom')
}
setInterval(throttle(fn,1000),10)
参考链接：JS函数防抖和函数节流
