js函数防抖与函数节流

1.函数防抖（debounce）

• 函数防抖，debounce。其概念其实是从机械开关和继电器的“去弹跳”（debounce）衍生出来的，基本思路就是把多个信号合并为一个信号。

• 函数防抖就是让某个函数在上一次执行后, 满足等待某个时间内不再触发此函数后再执行, 而在这个等待时间内再次触发此函数, 等待时间会重新计算。

• 处理诸如 resize、scroll、mousemove 和 keydown/keyup/keypress 等DOM事件的时候，通常我们不希望这些事件太过频繁地触发，比如input输入框架的格式验证，你可以隔200ms验证一次，而不是输入change之后立即验证。

/**
* 函数防抖
* @param {*} fn 需要防抖的函数
* @param {*} delay 延迟执行的时间
*/
function debounce(fn, delay) {
  let timeout;
  return function() {
    // 保存this和参数
    let context = this
    let args = arguments
    if(timeout) {
      clearTimeout(timeout) //频繁触发则清除上一次，只执行最后一次
    }
    timeout = setTimeout(() => {
      fn.apply(context, args)
    },delay)
  }
}
// 测试
function fn(num){
  console.log(num)
}
debounce(fn, 1000)(2) // 输出2

2.函数节流（throttle）

• 函数节流有点类似函数防抖，区别就是：对于连续触发的事件，函数防抖只执行最后一次触发的事件，函数节流则是降低事件发生的频率，让事件以较低的频率执行。可参考http://demo.nimius.net/debounce_throttle/

• 函数节流会用在比input, keyup更频繁触发的事件中，如resize, touchmove, mousemove, scroll。throttle 会强制函数以固定的速率执行。因此这个方法比较适合应用于动画相关的场景。

/**
* 函数节流
* @param {*} fn 要节流的函数
* @param {*} threshhold 执行间隔
*/
function throttle(fn, threshhold) {
  let timeout = null
  let start = new Date()
  return function() {
    // 保存this和参数
    let context = this
    let args = arguments
    clearTimeout(timeout)
    let curruent = new Date()
    if(curruent - start >= threshhold) {
      fn.apply(context, args)
      start = curruent
    } else {
      timeout = setTimeout(() => {
        fn.apply(context, args)
      }, threshhold)
    }    
  }
}

//测试，结果为每 5s 输出一个3，而不是 0.5s
let test = throttle((num) => {
  console.log(num)
}, 5000)
setInterval(() => {
  test(3)
}, 500)