Question

我正在创建一个搜索工具栏，允许用户使用Realm Browser作为我的数据库查看他们最近的搜索。每当用户键入TextInput组件时，我都会保存搜索，但是，我不希望在每次击键后添加搜索词，而是仅在用户停止键入一段时间后才添加。

handleOnChange函数将更新状态，并且仅在2秒后调用getResults

handleOnChange(text) {
    this.setState({
      searchStr: text
    }, () => setTimeout(() => {
      this.getResults()
    }, 2000))
  }

在getResults中，如果满足某些条件，我会调用addRecentSearch函数。

getResults() {
    let searchTags = []
    let searchCalcs = []
    let tagNames = this.state.tags.map((tag) => {
      return tag.name
    })
    if (this.state.searchStr.length >= 2 || this.state.tags.length !== 0) {
      searchCalcs = Realm.searchCalcs(this.state.searchStr, tagNames)
      Realm.addRecentSearch(this.state.searchStr)
    }

    this.setState({
      results: searchCalcs,
      tagsForFiltering: searchTags
    })
  }

所以我使用setTimeout来让我的状态有足够的时间在用户输入时更新。然后，一旦状态更新，我将要添加搜索查询。但是，在抓取最近的搜索时，我没有得到我预期的结果。

例如：

Type: "h"
Result: nothing happens as str must be at least 2 characters in length

Type: "he"
Result: meets criteria, and will add "he" as a recent search term. 
Arr: ["he"]

Type: "heart" (Note: adding 3 characters in succession)
Result: It seems that even with the timeout function, my getResults function is being called (thus adding the search query for each character I added)
Arr: ["he", "heart", "heart", "heart"]

我希望我的arr看起来像：

arr: ["he", "heart"]

Answer 1

你的例子中没有完全去抖动。你只是推迟了2000ms。您需要创建一个计时器，然后每次发生更改时重置它（通过再次清除和启动计时器）。通过这种方式，只有最后的延迟＆＃39;生效。有意义吗？

你非常接近编写自己的去抖功能，所以你可以使用clearTimeout，或者有一些库可以做到这一点。见Lodash https://lodash.com/docs/#debounce

React Native - 延迟

1 个答案: