RXJS扫描克隆在订阅中

发布于 2025-01-30 03:04:20 字数 1205 浏览 2 评论 0原文

我不明白RXJ中的某些内容。为什么这个可生殖的示例会创建第二个，重新初始化的计数器实例，当某人：

在INC按钮上单击某个次
，然后单击第二个订阅按钮
，然后在INC按钮上进行某个seklicks在INC按钮上，

为什么看起来像累加器可观察到的累加器在期间被克隆了第二个订阅？谢谢。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Reprex rxjs</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js">
    </script>
</head>
<body>
<button id="inc_button">Click me to increase</button>
<button id="go_button">Start second counter</button>
</div>
<script>
    let score_calc = rxjs
        .fromEvent(document.getElementById('inc_button'), 'click')
        .pipe(rxjs.operators.scan(acc => acc+1, 0));
        
    score_calc.subscribe(x => console.log('score1',x));
    
    rxjs
        .fromEvent(document.getElementById('go_button'), 'click')
        .pipe(rxjs.operators.first())
        .subscribe(()=> score_calc.subscribe(x => console.log('score2',x)));
</script>
</body>
</html>

注意：我是JavaScript Newbie。

原文

I don't understand something in rxjs.
Why is this reproductible example creating a second, reinitialized instance of counter, when someone:

clicks some times on the inc button
then clicks on the second subscribe button
then reclicks some times on the inc button

Why does it look like the accumulator observable was cloned during the second subscribe ?
Thanks.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Reprex rxjs</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js">
    </script>
</head>
<body>
<button id="inc_button">Click me to increase</button>
<button id="go_button">Start second counter</button>
</div>
<script>
    let score_calc = rxjs
        .fromEvent(document.getElementById('inc_button'), 'click')
        .pipe(rxjs.operators.scan(acc => acc+1, 0));
        
    score_calc.subscribe(x => console.log('score1',x));
    
    rxjs
        .fromEvent(document.getElementById('go_button'), 'click')
        .pipe(rxjs.operators.first())
        .subscribe(()=> score_calc.subscribe(x => console.log('score2',x)));
</script>
</body>
</html>

Note : I'm a JavaScript newbie.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

揽月 2025-02-06 03:04:21

与RX相比，这与JavaScript有关。查找热可观察和冷可观察到的区别，您会找到可让您在多个订户之间共享流的操作员。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Reprex rxjs</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js">
    </script>
</head>
<body>
<button id="inc_button">Click me to increase</button>
<button id="go_button">Start second counter</button>
</div>
<script>
    let score_calc = rxjs
        .fromEvent(document.getElementById('inc_button'), 'click')
        .pipe(
          rxjs.operators.scan(acc => acc+1, 0),
          rxjs.operators.shareReplay(1)
         );
        
    score_calc.subscribe(x => console.log('score1',x));
    
    rxjs
        .fromEvent(document.getElementById('go_button'), 'click')
        .pipe(rxjs.operators.first())
        .subscribe(()=> score_calc.subscribe(x => console.log('score2',x)));
</script>
</body>
</html>

This has more to do with rx than javascript. Look up the difference between hot and cold observables and you'll find operators that let you share streams between multiple subscribers.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Reprex rxjs</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js">
    </script>
</head>
<body>
<button id="inc_button">Click me to increase</button>
<button id="go_button">Start second counter</button>
</div>
<script>
    let score_calc = rxjs
        .fromEvent(document.getElementById('inc_button'), 'click')
        .pipe(
          rxjs.operators.scan(acc => acc+1, 0),
          rxjs.operators.shareReplay(1)
         );
        
    score_calc.subscribe(x => console.log('score1',x));
    
    rxjs
        .fromEvent(document.getElementById('go_button'), 'click')
        .pipe(rxjs.operators.first())
        .subscribe(()=> score_calc.subscribe(x => console.log('score2',x)));
</script>
</body>
</html>

回复收藏 0 原文

~没有更多了~