函数节流之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
  }
}