Vue防抖节流（es6装饰器）

防抖（debounce）

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次

/**
 * 函数防抖装饰器
 * @param delay
 * @returns {(function(*, *, *): void)|*}
 */
export function debounce( delay ) {
  let timer;
  return function ( target, name, descriptor ) {
    const fn = descriptor.value;
    descriptor.value = function ( ...args ) {
      clearTimeout( timer );
      timer = setTimeout( () => {
        fn.call( this, ...args );
      }, delay )
    };
  }
}

节流（throttle）

当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次

/**
 * 节流装饰器
 * @param delay
 * @returns {function(*, *, *): *}
 */
export function throttle( delay ) {
  return function ( target, key, descriptor ) {
    let lastTime,
      timer;
    const oldFunction = descriptor.value;
    descriptor.value = function () {
      let nowTime = +new Date();
      if ( lastTime && nowTime - lastTime < delay ) {
        if ( timer ) {
          clearTimeout( timer );
        }
        timer = setTimeout( () => {
          oldFunction.apply( this, arguments );
          lastTime = nowTime;
        }, delay );
      } else {
        oldFunction.apply( this, arguments );
        lastTime = nowTime;
      }
    }
    return descriptor;
  }
}

vue中使用

import {debounce} from '@/decorator'

export default {
  methods:{
    @debounce(100)
    handleSubmit(){}
  }
}

防抖和节流的区别

防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行