函数防抖和节流

函数防抖

什么是函数防抖

在写js的时候，有时候会频繁的触发函数，在一些场景中这么可能没问题，但是在一些特殊场景中可能就会对性能产生严重的影响，所以我们需要对其触发函数的时机进行控制，比如只有超过一定之间间隔才会触发，如果两次函数触发时间间隔小于规定的时间间隔，在采用最新的触发时间为标准，这就是函数防抖。

举例

function debounce (func, wait) {
      let timeout
      return function () {
        //解决this指向的问题，不然this=window
        let context = this
        //解决event参数
        let argus = arguments
        clearTimeout(timeout)
        timeout = setTimeout(function () {
          func.apply(context, argus)
        }, wait)
      }
}
htmlNode.onmouseover = debounce (func, wait)

上述例子中，每次鼠标移动都会触发绑定的函数，但是通过函数防抖，可以保证在上一次函数执行之前再次触发函数，会清除上一次函数的setTimeout，而已最新的一次为准。

函数节流

什么是函数节流

与函数防抖不同的地方在于，函数节流是在一定时间间隔内不会重复的去执行一个函数，知道上一次的函数执行完毕，才会触发下一次函数。

举例

//函数节流
function throttle1 (func, wait) {
      let context, argus
      let pre = 0
      return function () {
        context = this
        argus = arguments
        //获取毫秒数
        let now = +new Date()
        if (now - pre > wait) {
          func.apply(context, argus)
          pre = now
        }
      }
}
function throttle2 (func, wait) {
      let context, argus, timeout
      return function () {
        context = this
        argus = arguments
        if (!timeout) {
          timeout = setTimeout(function () {
            timeout = null
            func.apply(context, argus)
          } ,wait)
        }
      }
}