vue的节流和防抖

节流和防抖在日常开发用的还是比较频繁的，做个备忘。

<!-- html -->
<div>
    <el-input v-model="tableKey" @input="changeInput" style="width:300px" />
    <el-button @click="submit()" :disabled="isDisable" type="primary">点击</el-button>
    <div v-for="(item, index) in tableData" :key="index">
      {{item}}  <el-button @click="deleteSelf(item)" type="text"> 删除</el-button>
    </div>
  </div>

<!-- 初始化 -->
data() {
    return {
      tableKey: null,
      isDisable:false,
      tableData:[],
      TimeId:1
    };
  },

<!-- js -->
methods:{
    changeInput () { //input值改变每0.5秒push一次
      clearTimeout(this.TimeId)
      this.TimeId = setTimeout(() => {
        this.tableData.push(this.tableKey) // 这里可以写上要执行的放法
      }, 500)
    },
    deleteSelf(id){ //删除自身
     let currentIndex = (this.tableData || []).findIndex(item => item == id)
     console.log(`删除了${id}`,);
     this.tableData.splice(currentIndex,1)
    },
    submit(){ //每两秒才能点击一次
      console.log(123);//这里可以写上要执行的方法
      this.isDisable = true
      setTimeout(() => {
        this.isDisable = false
      }, 2000)
    }
  }

下面是节流，两秒后恢复正常点击状态