我需要暂停我的自定义计时器，并使用rxjs操作符从最后一个值开始

Question

我有下一个代码。这是我的自定义计时器，点击"开始"后开始计数，重置为"0"。秒按"重置";按钮。现在，我需要加上"等待"暂停计数按钮。

const observable$ = interval(1000)
const actionReset$ = new Subject ();
const actionWait$ = new Subject ();

function customTimer () {
const [ time, setTime] = useState (0);
const [ timerOn, setTimerOn ] = useState (false);

useEffect(() => {  
let subscription = actionReset$.pipe(
startWith(null),
switchMap(() => observable$),
).subscribe(result =>{
if (timerOn) {
setTime(result);
} else {
return () => subscription.unsubscribe();
}
});
return () => subscription.unsubscribe();
}, [timerOn]);

return (
<div className="mainBlock">
//....//
{!timerOn && (
<button onClick={() => setTimerOn(true)}>Start</button>
)}
{ timerOn && (
<button onClick={onStopClick}>Stop</button>
)}
{ timerOn && (
<button onClick={() => actionWait$.next('clickedwait')}>Wait</button>
)}   
{ time > 0 && (
<button onClick={() => actionReset$.next('clickedreset')}>Reset</button>
)}   
</div>  
);
}
export default customTimer;

所以，我需要暂停计数我的自定义计时器点击"等待"按钮，然后点击"start"按钮。我找不到合适的操作符

Answer 1

没有暂停操作符。过去有一个可暂停的概念(请参阅不实现此操作符的原因)，但这并不能实现您想要做的事情，因为您需要记住自己的运行时间版本。

有不同的方法可以实现这一点，但这里有一种使用扫描操作符的方法。这里假设actionWait$可观察对象是一个布尔型可观察对象。

const subscription = actionReset$.pipe(
startWith(null),  // your code
switchMap(() => observable$), // your code
withLatestFrom(actionWait$),
filter(([_, wait]) => !wait),  // ignore events while waiting
scan((seconds, _) => ++seconds, 0),  // keep your own counter
);

显然，这种方法不能正确地管理等待模式下的部分秒数。