函数节流之debounce

　　浏览器中某些计算和处理要比其他的昂贵很多。例如， DOM 操作比起非 DOM 交互需要更多的内存和 CPU 时间。连续尝试进行过多的 DOM 相关操作可能会导致浏览器挂起，有时候甚至会崩溃。尤其在 IE 中使用 onresize 事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。在 onresize 事件处理程序内部如果尝试进行 DOM 操作，其高频率的更改可能会让浏览器崩溃。为了绕开这个问题，你可以使用定时器对该函数进行节流。

　　函数节流背后的基本思想是指，某些代码不可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个 （摘录至JavaScript高级程序设计的函数节流）。

适用的应用场景：

1、window对象的resize、scroll事件

2、拖拽时的mousemove事件

3、射击游戏中的mousedown、keydown事件

4、文字输入、自动完成的keyup事件

 /**
  * 函数去抖，保证在一段时间内，被调用函数只是执行一次
  * @param {*} func 调用用的函数，function
  * @param {*} wait 等待的时间，单位ms
  * @param {*} immediate  当immediate为true时，第一次调用该函数的时候，就调用func函数；false表示超时之后再调用
  */
 export function debounce (func, wait, immediate = false) {
   let timeout, args, context, timestamp, result

   const later = function () {
     // 记录上一次触发时间间隔
     const last = +new Date() - timestamp

     // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
     // 调用的时间比较频繁，重新计算下次执行的时间
     if (last < wait && last > 0) {
       timeout = setTimeout(later, wait - last)
     } else {
       timeout = null
       // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
       if (!immediate) {
         result = func.apply(context, args)
         if (!timeout) context = args = null
       }
     }
   }

   // ...args：使用es6的rest运算符，把逗号隔开的值序列组合成一个数组：如test(1,2,3,4) ==> args:[1,2,3,4]
   // 符合apply(obj,[])
   return function (...args) {
     // 把上下文的this对象保存下来，因为下面的apply要使用
     context = this
     // 记录当前的时间戳，也可以使用Date.now()
     timestamp = +new Date()
     // 第一次调用该方法时，且immediate为true，则调用func函数
     const callNow = immediate && !timeout
     // 如果延时不存在，重新设定延时，首次的时候
     if (!timeout) {
       timeout = setTimeout(later, wait)
     }
     // 如果immediate为true，那么立马调用该函数
     if (callNow) {
       result = func.apply(context, args)
       context = args = null
     }

     return result
   }
 }