Vue中使用防抖与节流的方法

// 防抖
export default function debounce(fn, time) {
  time = time || 200
  // 定时器
  let timer = null
  return function(...args) {
    var _this = this
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() {
      timer = null
      fn.apply(_this, args)
    }, time)
  }
}

// 节流
export default function throttle(fn, time) {
  let timer = null
  time = time || 1000
  return function(...args) {
    if (timer) {
      return
    }
    const _this = this
    timer = setTimeout(() => {
      timer = null
    }, time)
    fn.apply(_this, args)
  }
}

<el-button @click="clickDebounce">防抖</el-button>
<el-button @click="clickThrottle">节流</el-button>

//引用定义好的js方法
import debounce from '@/utils/debounce'
import throttle from '@/utils/throttle'
methods: {
    clickDebounce: debounce((e) => {
      console.log(1)
    }, 1000),
    clickThrottle: throttle((e) => {
      console.log(2)
    }, 1000),
}