我有一个使用React
函数component
的简单点击事件,我尝试使用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
并进行更新。
答案 0 :(得分:0)
每次状态更改时都会调用组件函数Button()
,因此您将在每个状态更改时进行新的订阅。这就是为什么它看起来不起作用的原因。
相反,订阅应该进入useEffect()
:
useEffect(() => {
subject.pipe(throttleTime(400)).subscribe(d => updateThrottled(d));
}, []);
另请参阅How to call loading function with React useEffect only once。