2021-08-18vue中防抖和节流相关处理方案实践

<template>
  <div class="hello">
    <input type="text" v-model="msg" placeholder="edit me" @keyup='debounce'>
    <button @click='clickEvent'> 点击了</button>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  data () {
    // eslint-disable-next-line no-unused-vars

    return {
      msg: 'Welcome ',
      valid: true,
      timer: ''
    }
  },
  methods: {
    debounce () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(function () {
        console.log('我执行了 ', this.msg)
        this.timer = undefined
      }, 2000)
    },
    clickEvent () {
      console.log(this.valid)
      if (!this.valid) {
        return false
      }
      this.valid = false
      setTimeout(() => {
        console.log('我点击了一下')
        this.valid = true
      }, 3000)
    }

  }

}
</script>

其中input执行的是防抖
button执行的是节流
防抖跟节流的区别：个人理解
相同点，都是为了解决一段时间内，大量频繁的调用事件，影响性能
不同点，防抖是间隔一段时间后，再去执行一次事件，而节流是在相同的时间间隔内只执行一次事件