Vue2+vant实现输入框防抖

目标

步骤

0. van-search关联kw变量

   <van-search v-fofo v-model="kw" placeholder="请输入搜索关键词" background="#007BFF" shape="round" />
   

1. 在data中声明变量timer, 保存延迟定时器

   data () {
       return {
           kw: '', // 搜索关键字
           timer: null // 防抖, 用的定时器
       }
   }
   

2. 监听输入框的@inupt事件, 在事件处理函数中使用防抖操作

   <van-search v-fofo v-model="kw" placeholder="请输入搜索关键词" background="#007BFF" shape="round" @input="inputFn"/>
   ​
   <script>
       methods: {
           inputFn () {
               // 防抖：延时执行逻辑代码，事件再次触发时，清除上一个定时器
               clearTimeout(this.timer)
               this.timer = setTimeout(() => {
                   if (this.kw.length === 0) return // 防止空内容触发下面逻辑
                   console.log(this.kw)
               }, 500)
           }
       }
   </script>
   ​
   

小结

什么是防抖?

• 降低逻辑代码触发频率
• 只要最后一次执行即可
• 如果中间再次触发, 重新弄个计时器倒计时