Question

你们能告诉我这里有什么问题吗

RxJS

我期望该值仅打印一次，但是打印多次。

function Search(sel) {
    let observable = Rx.Observable.fromEvent(document.getElementById('iCard'), 'input');
    observable
      .debounceTime(1000)
      .distinctUntilChanged()
      .subscribe({
        next: this.callGlobalSearch
      });
  }

  function callGlobalSearch(e){
    console.log('VALUE : ', e.target.value); // NOT SURE, WHY THE VALUE IS PRINTED MULTIPLE TIMES
  }

Answer 1

在check here中更改了您的代码。您无需在每个input上订阅keyup事件。 distinctUntilChanged正在获取总是不同的事件对象。所以它什么也做不了。在将该事件映射到文本之前，可以在distinctUntilChanged中进行比较。

Rx.Observable.fromEvent(document.getElementById('iCard'), 'input')
  .debounceTime(1000)
  .map(e => e.target.value)
  .distinctUntilChanged()
  .subscribe({
    next: callGlobalSearch
  });

function callGlobalSearch(text) {
  console.log('VALUE : ', text);
}

Answer 2

每次keyup都运行函数Search(sel)。

每次运行函数Search(sel)时，都会创建一个Observable并订阅它。

因此，在发生 n keyup个事件之后，您最终有 n 个有效的订阅 n 个不同的源Observable，因此您会看到控制台上记录的行的 n 重复。

如果更改html代码，例如

<body onload="Search(this)"> 

Global Search
<input id="iCard" type='text' />

</body>body>

您应该得到正确的行为。将函数Search的名称更改为与实际执行的内容更匹配的名称，例如createInputObs，根据您的风格。

RxJS的distinctUntilChanged多次发出相同的值

2 个答案: