前言
函数节流和去抖的出现场景，一般都伴随着客户端 DOM 的事件监听。举个例子，实现一个原生的拖拽功能（不能用 H5 Drag&Drop API），需要一路监听 mousemove 事件，在回调中获取元素当前位置，然后重置 dom 的位置（样式改变）。如果我们不加以控制，每移动一定像素而触发的回调数量是会非常惊人的，回调中又伴随着 DOM 操作，继而引发浏览器的重排与重绘，性能差的浏览器可能就会直接假死，这样的用户体验是非常糟糕的。我们需要做的是降低触发回调的频率，比如让它 500ms 触发一次，或者 200ms，甚至 100ms，这个阈值不能太大，太大了拖拽就会失真，也不能太小，太小了低版本浏览器可能就会假死，这样的解决方案就是函数节流，英文名字叫「throttle」。函数节流的核心是，让一个函数不要执行得太频繁，减少一些过快的调用来节流。
说完函数节流，再看它的好基友函数去抖（debounce）。思考这样一个场景，对于浏览器窗口，每做一次 resize 操作，发送一个请求，很显然，我们需要监听 resize 事件，但是和 mousemove 一样，每缩小（或者放大）一次浏览器，实际上会触发 N 多次的 resize 事件，用节流？节流只能保证定时触发，我们一次就好，这就要用去抖。简单的说，函数去抖就是对于一定时间段的连续的函数调用，只让其执行一次。
throttle像是按钮的冷却时间，防止用户频繁操作；
debounce像是搜索框的查询，等待用户完成操作再执行，避免打字期间就不断的查询。
函数节流应用场景
函数节流有哪些应用场景？哪些时候我们需要间隔一定时间触发回调来控制函数调用频率？
- DOM 元素的拖拽功能实现（mousemove）
- 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
- 计算鼠标移动的距离（mousemove）
- Canvas 模拟画板功能（mousemove）
- 搜索联想（keyup）
- 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次
函数去抖应用场景
函数去抖有哪些应用场景？哪些时候对于连续的事件响应我们只需要执行一次回调？
- 每次 resize/scroll 触发统计事件
- 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）
节流实例代码
由于节流是改变回调函数被频繁触发，让它可以隔一段时间触发一次，而不是在操作的过程中一直被触发。下面是最简单的节流实现：
_throttle(method, delay = 100) {
const that = this;
let last = 0;
return function () {
const now = Date.now();
if (now - last > delay) {
method.apply(that, arguments);
last = now;
}
}
}
这里的delay是每次触发回调函数的间隔时间。例如，每次进行scroll滚动操作时，先获取当前时间，减去0，计算的就是上一次调用这个回调函数和现在的间隔时间，时间大于delay这个时间，才执行回调函数，然后把last的这个时间改为如今执行函数的时间。
去抖实例代码
去抖就是在进行操作时避免一直触发回调函数，只在操作结束的时候才执行回调函数。
window.onscroll = function(){
console.log("scroll滑动");
throttle(count);
}
function count(){
console.log("函数调用");
}
function throttle(method, context){
clearTimeout(method.tId)
method.tId = setTimeout(function(){
method.call(context);
}, 300);
}每次执行scroll操作时，会一直触发throttle(count)方法，每次执行throttle，会先把之前的定时器清除，再开启一个新的定时器，由于触发throttle(count)的频率是很高的，因此定时器还没来得及执行，已经被下一次的throttle(count)事件清除了，直到scroll停止了，最后就会触发一次回调函数。