节流(throttle)

浏览器中某一些事件是会连续触发的，比如onmousemove，onscroll，对于这种连续触发的事件我们有必要加以限制，要么从源头（浏览器）减少出发次数，要么在handler处理方法中动手脚，对于浏览器已经做好的功能我们没有办法去修改，所以只能在handler做处理了。

节流这个名称可以对比生活中很多场景，比如，用水管清洗玻璃上的灰尘，如果水管中水的流速为1的时候刚好能清洗干净，那么就没有必要让水的流速为2，重属浪费，对比浏览器中的onmousemove，如果每隔500ms执行一次handler就能实现我想要的效果，那也没必要每次都去执行了，所以这就是节流的必要性。

实现：闭包加时间间隔判断

  1. // throttle
  2. // 闭包加时间差
  3. function throttle (fn, delay) {
  4.     let preTime = Date.now()
  5.     return function (...args) {
  6.         const curTime = Date.now();
  8.         if (curTime - preTime > delay) {
  9.             fn.apply(this, args);
  11.             preTime = curTime
  12.         }
  13.     }
  14. }

防抖(debounce)

对于某些场景来说，节流就不适用了，比如动态搜索，一边输入一遍搜索，没有必要每输入一个字符搜索一下，我们只需要最后去搜一此就行，我们设定一个默认时间段delay，如果用户输入时间间隔超过delay，那就去搜一次，即使这不是最后一次输入，那也大大减少了一些没必要的搜索

  1. // debounce
  2. function debounce(fn, delay) {
  3.   let timer
  4.   return function(...args) {
  5.     clearTimeout(timer)
  6.     timer = setTimeout(() => {
  7.       fn.apply(this, args);
  8.     }, delay)
  9.   }
  10. }