uniapp输入框的防抖处理

最新推荐文章于 2025-04-24 11:50:01 发布

寄相思予代码

最新推荐文章于 2025-04-24 11:50:01 发布

阅读量1k

点赞数 2

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_72503508/article/details/129647301

版权

1. 在 data 中定义一个 setTimeout 的名字

 data() {
      return {
        timer: null // 延时器的名字
      };
    },

2. 在监听 input 输入事件的函数内编写如下代码：

 methods:{
      input(e){
        // 每次触发输入事件的时候先清除定时器
        clearTimeout(this.timer)

        // 每隔 500毫秒 调用
        this.timer = setTimeout(()=> {
          console.log(e)
        }, 500)
      }
    }

3. 完整代码如下：

注意我用的是 uni-search-bar 组件，这里我主要讲的是输入框防抖处理，大家的样式可能跟我的不一样

<template>
  <view>
    <view class="search-box">
      <!-- 监听 input 事件 -->
        <uni-search-bar :focus="true" @input="input" :radius="100" :cancelButton="none"></uni-search-bar>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 定时器的名字
        timer: null
      };
    },
    methods:{
      input(e){
        // 每次触发 input 事件清除一次定时器
        clearTimeout(this.timer)
        
        // 每隔 500毫秒 触发定时器
        this.timer = setTimeout(()=> {
          console.log(e)
        }, 500)
      }
    }
  }
</script>

<style lang="scss">

</style>