RXJS-油門時間不油門

Question

我有一個帶有React函數component的簡單click事件，並且嘗試使用RxJS throttleTime 。 每次點擊我throttle在500ms ，但好像從來沒有油門在所有的工作，但是當我使用防抖動它的工作原理。

import React, { useState, useRef } from "react";
import { throttleTime, debounceTime } from "rxjs/operators";
import { Subject } from "rxjs";

const subject = new Subject();

function Button() {
  const btn = useRef();
  const [clickCount, updateClick] = useState(0);
  const [debounceCount, updateDebounced] = useState(0);
  const [throttleCount, updateThrottled] = useState(0);
  const onClicked = e => {
    updateClick(parseInt(e.target.value, 10) + 1);
    subject.next(parseInt(e.target.value, 10) + 1);
  };
  subject.pipe(debounceTime(500)).subscribe(d => updateDebounced(d));
  subject.pipe(throttleTime(400)).subscribe(d => updateThrottled(d));
  return (
    <div className="button">
      <button value={clickCount} ref={btn} onClick={onClicked}>
        CLICK
      </button>
      <div>Actual clicks: {clickCount}</div>
      <div>Debounced clicks: {debounceCount}</div>
      <div>Throttle click: {throttleCount}</div>
    </div>
  );
}

問題是每次點擊clickCount和throttleCount增加在同一時間，但debounceCount正常工作，它等待500ms和更新。

工作現場演示

Answer 1

每次狀態更改時都會調用組件函數Button()因此您將在每個狀態更改時進行新的訂閱。 這就是為什么它看起來不起作用的原因。

相反，訂閱應該進入useEffect() ：

useEffect(() => {
  subject.pipe(throttleTime(400)).subscribe(d => updateThrottled(d));
}, []);

另請參閱如何僅使用一次使用React useEffect調用加載函數 。