更好地理解 API 请求的 debounceTime (RXJS)答案

【问题标题】：Better understand debounceTime (RXJS) for an API request更好地理解 API 请求的 debounceTime (RXJS)
【发布时间】：2020-01-02 06:37:10
【问题描述】：

我正在尝试创建一个搜索引擎（输入），每次用户开始输入时，它都会在发送查询调用之前稍等片刻。据我了解，我们将导入

import { of } from "rxjs";
import { debounceTime } from "rxjs/operators";

使用of 的目的是因为我们将使用一个字符串。至于debounceTime，我们只想处理（发出请求）到在我们选择的设定时间内写入的最后一个输入。对于这个实现，我设置它的方式是

const PostTypeSelection = ({ client }) => {
  const [search, updateSearch] = useState("");
  const [tags, updateTags] = useState([]);
  const searchObserver = of(search);

  const handleChange = e => {
    const { value } = e.target;
    updateSearch(value);
    searchObserver
      .pipe(
        debounceTime(1000),
        distinctUntilChanged()
      )
      .subscribe(x => console.log("we run query here", x));
  }

  return (
    <div>
      <p>Select tags you'll want to see</p>
      <input
        type="text"
        name="search"
        placeholder="Type tag name"
        onChange={handleChange}
      />
      {tags.map(tag => {
        return (
          <div key={tag.id}>
            {tag.name} ({tag.count})
          </div>
        );
      })}
    </div>
  );
};

我的主要问题是我的实施有什么问题？当我开始输入时没有延迟，console.log 立即运行。我注意到的另一个问题是，如果我尝试使用delay，它不会删除先前的请求，只是在设定的时间后将它们全部发送。

感谢所有帮助，尤其是在更好地理解如何使用 Observer 和更好地理解 debounceTime 的正确使用方面

【问题讨论】：

您可能想要的是 rxjs 运算符fromEvent()，请参阅文档here

标签： reactjs rxjs rxjs6

【解决方案1】：

对我要说的话持保留态度。我不是 Rxjs 开发人员（老实说，我从未使用过 lib ?）但我了解这些概念。

我在你的实现中发现了两个问题：

对于您创建的每个按键以及新的观察者和订阅它，因为所有管道和订阅代码都在处理程序中。
根据文档对of 的描述，它按顺序发出提供的值。例如：of(1,2,3,3)。在这里，我认为您没有序列。每次更新状态时，整个函数都会运行，从而导致 of begin 对每个值调用一次：of('a')、of('ab')、of('abc')，而不是 of('a', 'ab', 'abc')。

这是我为使它工作所做的：

const PostTypeSelection = ({ client }) => {
  const [tags, updateTags] = useState([]);
  const searchObserver = new Subject().pipe(
    debounceTime(1000),
    distinctUntilChanged()
  );
  searchObserver.subscribe(x => console.log("we run query here", x))
  const handleChange = e => {
    const { value } = e.target;
    searchObserver.next(value)
  }

  return (
    <div>
      <p>Select tags you'll want to see</p>
      <input
        type="text"
        name="search"
        placeholder="Type tag name"
        onChange={handleChange}
      />
      {tags.map(tag => {
        return (
          <div key={tag.id}>
            {tag.name} ({tag.count})
          </div>
        );
      })}
    </div>
  );
};

【讨论】：