vue中的防抖和节流

原生js都是通过自己定义函数来实现的，vue中 可以直接使用 loadsh 中封装好的 ，loadsh 向外 暴露了 { throttle, debounce } 这两个方法 

import { throttle, debounce } from 'lodash' 
/**
 * 函数节流装饰器
 * @param {number} wait 节流的毫秒
 * @param {Object} options 节流选项对象
 * [options.leading=true] (boolean): 指定调用在节流开始前。
 * [options.trailing=true] (boolean): 指定调用在节流结束后。
 */
export const throttle =  function(wait, options = {}) {
  return function(target, name, descriptor) {
    descriptor.value = throttle(descriptor.value, wait, options)
  }
}

/**
 * 函数防抖装饰器
 * @param {number} wait 需要延迟的毫秒数。
 * @param {Object} options 选项对象
 * [options.leading=false] (boolean): 指定在延迟开始前调用。
 * [options.maxWait] (number): 设置 func 允许被延迟的最大值。
 * [options.trailing=true] (boolean): 指定在延迟结束后调用。
 */
export const debounce = function(wait, options = {}) {
  return function(target, name, descriptor) {
    descriptor.value = debounce(descriptor.value, wait, options)
  }
}
封装之后再组件中使用

 
import {debounce} from '@/decorator'

 export default { methods:{ @debounce(100) resize(){} } } 【代码来自五毛的笔记本个人网站】