小程序输入框防抖

最新推荐文章于 2024-03-28 09:15:14 发布

原创最新推荐文章于 2024-03-28 09:15:14 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

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

18 篇文章

订阅专栏

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

防抖 (防止抖动) 定时器
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
    })
  }
})