vue2中防抖的一种实现

1. 理解防抖、节流。
2. 看我实现防抖
3. 三连

1. 想必大家都玩过 lol ,王者荣耀，决战平安京吧。 我们可以形象的说
   1.1.防抖—》就是你回城的时候，你自己不想回城了，或是别人打断了了你，你无法回城，必须等到你完成回城读秒后，才能回城。
   1.2.节流–》你的eq冷却的时候，点了也没用，等到冷却完毕，才可以无情铁手和大杀四方。

2. 下面展示一些 vue2的实现，提示是掌握一点vue2技术。

//2.1. data中定义一个延时器的 Id
      timerId: null
       kw: '',
//2.2 输入框绑定一个 v-model 和input时间，这用的vant组件库。
 <van-search
        v-model.trim="kw"
        placeholder="请输入搜索关键词"
        background="lightgreen"
        shape="round"
        ref="searchRef"
        @input="handlerInput"
      />
// 2.3 methods 里面-----》2.3.1先来个定时器 2.3.2每次触发input事件，清除定时器，3.判断，输入内容为空，则不开启定时器
methods: {
    handlerInput () {
    // 2.3.2
      clearTimeout(this.timerId)
      // 2.3.3
      if (this.kw.length === 0) return
      // 2.3.1
      this.timerId = setTimeout(() => {
        console.log(this.kw)
      }, 500)
    }
  },

3. 写的笔记，谢谢观看。喜欢看恐怖片 的 孩子 可以一起讨论讨论