Vue防抖与节流的使用介绍

export default {
// 防抖
debounce: function (fn, t) {
    let delay = t || 500;
    let timer;
    return function () {
      let th = this;
      let args = arguments;
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(function () {
        timer = null;
        fn.apply(th, args);
      }, delay);
    }
  },
  // 节流
  throttle: function (fn, t) {
    let last;
    let timer;
    let interval = t || 500;
    return function () {
      let th = this;
      let args = arguments;
      let now = +new Date();
      if (last && now - last < interval) {
        clearTimeout(timer);
        timer = setTimeout(function () {
          last = now;
          fn.apply(th, args);
        }, interval);
      } else {
        last = now;
        fn.apply(th, args);
      }
    }
  }
}

import throttleDebounce from '@/utils/throttleDebounce.js'

// convertRes  是el-button绑定的点击事件
methods:{
convertRes: throttleDebounce.throttle(function() {
      //  需要节流的事件，我这里是接口的调取
      this.convertResFinal()  
    }, 500),
//  节流的事件
convertResFinal() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          this.hexBtnLoading = true
          const params = {
            arch: this.form.arch,
            addr: this.form.addr,
            hexdump: this.form.hexdump
          }
          try {
            const res = await getVexConvertRes(params)
            if (res.code === 200) {
              
            }
          } catch (error) {
          }
        }
      })
    },
}