函数的节流和函数的防抖

函数的节流和函数的防抖都是优化高频率执行的函数的一种方法。咱们知道浏览器中某些计算和处理要比其余昂贵不少。好比DOM的操做。当一个操做dom的函数高频率执行时，咱们能够根据状况进行节流或防抖的处理。

节流函数

在每一个时间段里，最多只容许运行一次。好比说resize调整窗口，在调整窗口的过程当中，事件一直在高频率的触发，咱们能够利用节流函数让其在必定的间隔时间段内最多触发一次。用一个形象的比喻吧。生产线上的啤酒瓶排成队往前跑，一个行动迟缓的树懒，每一段时间内只能拿到一个瓶子。

思路：第一次调用的时候记录一下时间戳，以后每次运行的时候都和上一次调用的时候的时间戳比较差值，当差值大于等于某个值的时候才执行。

function throttle (action, delay) {
  let timeout = null
  let lastRun = 0
  return function () {
    if (timeout) {
      return
    }
    let elapsed = Date.now() - lastRun
    let context = this
    let args = arguments
    let runCallback = function () {
      lastRun = Date.now()
      timeout = false
      action.apply(context, args)
    }
    if (elapsed >= delay) {
      runCallback()
    } else {
      timeout = setTimeout(runCallback, delay)
    }
  }
}

防抖函数

在高频调用中，只有足够的空闲时间，代码才会执行一次，常见的就是input的change事件，只有停顿输入的事件大于指定的时间，代码才会执行一次。用一个形象的比喻吧。生活中的声控灯，只要你不停的说话，灯就不会熄灭，只有你安静的时间大于必定的值时，灯才会熄灭。

思路：第一次调用的时候建立一个定时器，在指定的间隔时间以后运行代码，当第二次调用该函数时，清除前一次的定时器并另设置一个。若是前一个定时器已经执行了，这个操做就没任何意义，若是前一个定时器还没执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求中止了一段时间以后才执行。根据以上思路实现一个防抖函数。

function debounce(action, content, delay){
    let timeoutId = null;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function(){
            action.apply(content);
        }, delay);
    }
}