vue 中使用节流和防抖(触发事件中&watch中使用)

Tools.js

/*
 * fun [function] 需要防抖的函数
 * delay [number] 毫秒，防抖期限值
 */
export function debounce(fun, delay = 300) {
  let timer;
  return function () {
    let ctx = this
    let args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      timer = null
      fun.apply(ctx, args)
    }, delay)
  }
}
/*
 * fun [function] 需要节流的函数
 * delay [number] 毫秒，节流期限值
 */
export function throttle(fun, interval = 300) {
    let last;
    let timer;
    return function () {
        let ctx = this
        let args = arguments
        let now = new Date()
        if (last && now - last < interval) {
          clearTimeout(timer)
          timer = setTimeout(function () {
            last = now
          }, interval)
        } else {
          last = now
          fun.apply(ctx, args)
        }
    }
}

//点击事件触发
<button @click="getCode">防抖</button>

import { debounce } from '../../utils/Tools'  在工具栏中引入防抖
 // 组件数据
  data() {
    return {
      value: '',
    }
  },
// 监听属性
  watch: {
    value() {
      this.check()
    }
  },
   // 组件方法
  methods: {
  	//监听触发
    check:debounce(function(e){
      this.getorderData()  //要使用防抖处理的函数方法
      console.log("防抖");
    },1500),
    //点击事件触发
    getCode:debounce(function(e){
      this.getorderData()  //要使用防抖处理的函数方法
      console.log("防抖");
    },1500),
  }