代码说明

We-UI下载使用的SearchBar组件能够使用，但是输入时会出现滞后的问题。

js代码的search函数中添加一段查找代码，在数据库中模糊匹配关键词，并渲染结果【见代码块】

问题

1. 输入value“信号”，需添加一个空格，结果才会在下面列表中渲染。
2. 再次输入value“电源”，能从console中看到，待渲染的数组catList已经发生变化，即“电源”关键词的搜索结果已经赋值给catList，但是视图层并没有渲染，仍然维持第一个value“信号”的结果【见图1】
3. 做一点操作，比如将value“电源”删去一个字，剩下“电”，则视图层又渲染了2中关键词value为“电源”时的结果【见图2】，此时的catList已经是value“电”的匹配结果
4. 可以预见，更改输入value后，视图层又将渲染3中value为“电”时的搜索结果。

总结：每次需要多做一点动作，上一次的结果才能够在视图层中渲染

请问各位大神，应该怎么解决这个问题？

// pages/searchV2/searchV2.js
const app = getApp();
wx.cloud.init();
var CloudEnv = app.CloudEnv; //从全局变量中引入云开发环境id
Page({
  data: {
    inputShowed: false,
    inputVal: "",
    catList: [], //使用catList数组供视图层渲染
    
  },
  onLoad() {
    this.setData({
      search: this.search.bind(this)
    })
  },

  search: function (value) {
    //在数据库中模糊匹配搜索框输入的value，并将结果赋值给catList
    var formData = value;
    console.log(formData)
//启动云环境
    const db = wx.cloud.database({
      env: CloudEnv
    });
    console.log("正在搜索")
    var that = this;
//正则匹配，搜索结果赋值给catList
    db.collection('classAll').where({
      _id: db.RegExp({
        regexp: formData,
        options: 'i',
      })
    }).get({
      success: res => {
        that.setData({
          catList: res.data,
        })
      }
    })


    return new Promise((resolve, reject) => {
      setTimeout(() => {
        //把catList给resolve
        resolve(that.data.catList);
      }, 200)
    })


  },
  selectResult: function (e) {
    console.log('select result', e.detail.item)
    wx.navigateTo({
      url: 'details/details?item=' + JSON.stringify(e.detail.item),
    })
  },
})