函数节流防抖

防抖函数：持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次

某些代码不可以在没有间断的情况连续重复执行。
第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。
如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

只有最后一次操作会被触发

    /**
     * 函数防抖，持续触发事件时，只有最后一次操作且delay时间后触发
     * @param {function} fn 必填，要执行的函数
     * @param {*} context 必填，作用域,指定上下文
     * @param {number} delay 可选，延迟执行的时间
     */
    debounce (fn, context, delay = 500) {
      return function () {
        let arg = arguments
        clearTimeout(fn.timerId)
        fn.timerId = setTimeout(function () {
          fn.call(context, ...arg)
        }, delay)
      }
    }

定义在vue的methods中的去使用：

@click="debounce(btnHandler, this)(1,2)" // ----有传参数
@click="debounce(btnHandler, this)()" //----无参数

window.addEventListener('scroll', this.debounce(this.scrollHandler, this))

简化后的函数防抖

使用箭头函数简化，代码如下：

    /**
     * 函数防抖，持续触发事件时，只有最后一次操作且delay时间后触发
     * @param {function} fn 必填，要执行的函数
     * @param {number} delay 可选，延迟执行的时间
     */
    debounce (fn, delay = 500) {
      return function () {
        clearTimeout(fn.timerId)
        fn.timerId = setTimeout(() => {
          fn.call(this, ...arguments)
        }, delay)
      }
    }

应用

window.onresize = function () {
 var div = document.getElementById('myDiv')
 div.style.height = div. offsetWidth + 'px'
}

改写为

function resizeDiv () {
 var div = document.getElementById('myDiv')
 div.style.height = div. offsetWidth + 'px'
}
window.onresize = function () {
 debounce(resizeDiv,1500)()
}

定义在vue的methods中的去使用：

@click="debounce(btnHandler)(1,2)" // ----有传参数
@click="debounce(btnHandler)()" //----无参数

函数防抖将多次操作合并为一次操作，并在delay的时间后触发函数。如果在规定的delay时间内触发函数，清除之前的定时器并重新设置定时器，并在delay时间后触发函数。只有最后一次操作会被触发。

• 应用场景：实时输入去搜索时可以用到，window触发resize的时候

函数节流：持续触发事件时，在一定时间内只会触发一次

    /**
     * 节流函数，持续触发事件时，一定时间内只调用一次
     * @param {function} fn 必填，要执行的函数
     * @param {number} delay 可选，延迟执行的时间
     */
    throttle (fn, delay = 1500) {
      return function () {
        if (!fn.timerId) {
          fn.call(this, ...arguments)
          fn.timerId = setTimeout(() => {
            fn.timerId = null
          }, delay)
        }
      }
    }

定义在vue的methods中的去使用：

@click="throttle(btnHandler)(1,2)" // ----有传参数
@click="throttle(btnHandler)()" //----无参数

window.addEventListener('scroll', this.throttle(this.scrollHandler))

节流函数是要执行的函数执行后，在定义的delay时间内不再触发函数， 等定时器清除后再去触发函数。

• 应用场景：鼠标不断点击触发，监听滚动事件

至于用防抖函数还是节流函数就根据自己的需要去选择了