小程序输入框防抖

最新推荐文章于 2023-08-15 21:26:59 发布

qq_43427657

最新推荐文章于 2023-08-15 21:26:59 发布

阅读量200

点赞数

分类专栏：知识在于积累

本文链接：https://blog.csdn.net/qq_43427657/article/details/112708391

版权

知识在于积累专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了防抖(debounce)和节流(throttle)两种技术，并展示了它们在前端输入框搜索场景中的应用。通过设置全局定时器ID，实现输入值改变时的防抖处理，避免频繁发送请求。在输入框值变化时，如果在规定时间内再次输入，则清除已有的定时器并重新设置，确保只有在用户停止输入一段时间后才执行搜索请求。这种策略有效优化了用户体验，减少了不必要的网络请求。

摘要由CSDN通过智能技术生成

防抖 (防止抖动) 定时器
0 防抖一般输入框中防止重复输入重复发送请求
1 节流一般是用在页面下拉和上拉
2 定义全局的定时器id

Page({
  data: {
      goods:[],
  },
  TimeId:-1,
  //输入框的值改变， 就会触发的事件
  handleInput(e){
    // 1 获取输入框的值
    const {value} = e.detail;
    // 2 检测合法性
    if(!value.trim()){
      // 值不合法
      return;
    }
    // 3 准备发送请求获取数据
    clearTimeout(this.TimeId)
    this.TimeId = setTimeout(()=>{
      this.qsearch(value);
    },1000)
   
  },
  async qsearch(query){
    const res = await request({url:"/goods/qsearch",data:{query}})；
    this.setData({
      goods:res
    })
  }
})