作用

防抖事件，是我们性能优化的一种方案，它是在规定的时间内，只会让事件去执行一次。比如我们让某个事件在500ms后去执行。如果在这500ms内，再次触发了这个事件。之前的事件就会被清除，然后500ms后来执行后面的这个事件。

<template>
  <div>
    <div>{{ inputValue }}</div>
    <input type="text" v-model="inputValue" @input="inputFn" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      time: null,
    };
  },
  methods: {
    inputFn() {
      if (this.time) clearTimeout(this.time);
      this.time = setTimeout(this.Fn, 300);
    },
    Fn() {
      console.log("300ms内input框有输入就不会打印这条信息");
    },
  },
};
</script>

总结

因为自己的工作年限比较短，我个人之前会觉得防抖事件是有点复杂的，自己是写不出的。后面把原理了解过，然后再重新去看代码，发现是特别简单的。之前自己觉得难是因为看别人的代码在定时器里面直接写事件，代码显得比较多，看起来就比较晕。后来自己想了一下，把这个事件的代码单独拿出来，到时再调用，这样看起来就简洁很多。