微信小程序模糊查询节流

在开发中都会有搜索框,相对于输入内容之后点击搜索或者回车搜索,模糊查询的用户体验会好一些,而小程序的模糊查询只能通过bindinput 事件来绑定,而小程序没有类似与VUE的.lazy修饰符之类的,也就意味着给bindinput事件绑定搜索事件的话每一次按键都会触发请求,所以需要对其进行简单的节流操作。
JS部分

 searchinput(e) {
    // 搜索节流
    const now = Date.now() // 现在时间
    const delay = 1500 // 延迟时间
    const main = () => { // 执行函数
      const search = e.detail.value  // 输入的搜索内容
      // 进行模糊查询获取数据             
      request.post("/url", {
          keyWord: search,
          pageNow: 1,
          pageSize: 10
      }).then( res => {
        console.log(res)
      }).catch( err => {})
    }
    // 延迟进行数据请求
    if (this.searchinput.timeStamp && (now - delay <= this.searchinput.timeStamp)) {
      clearTimeout(this.searchinput.time)
      this.searchinput.timeStamp = now
      this.searchinput.time = setTimeout(main, delay)
    } else{
      this.searchinput.timeStamp = now
      this.searchinput.time = setTimeout(main, delay)
    }
  },

你可能感兴趣的:(微信小程序模糊查询节流)