javascript - 单击按钮后取消订阅的 RXJS 方式，但有机会再次订阅

Question

import { reduce, filter, map, mapTo } from 'rxjs/operators'
import { from, fromEvent, scan, Subscription } from 'rxjs'

const button1 = document.getElementById("but1")
const button2 = document.getElementById("but2")
const button3 = document.getElementById("but3")



let click1 = fromEvent(button1, 'click')
.subscribe(result => {
    count3.subscribe(x => p3.innerHTML = `Click count: ${x}`)
})


let click2 = fromEvent(button2, 'click')

here i want to unsubscribe subscription (when i click on second button, but with opportunity to subscribe again when i click first button)

我尝试过类似的事情

const sub = click1.subscribe(result => {
        count3.subscribe(x => p3.innerHTML = `Click count: ${x}`)
    })


let click2 = fromEvent(button2, 'click')
    sub.unsubscribe()

但我不知道如何将 sub.unsubscribe() 放入按钮

let click3 = fromEvent(button3, 'click')

let three = click3.pipe(mapTo(1))

let c: number = 0

let count3 = three.pipe(scan((acc, val) => acc + val, c))

const d = document.getElementById("d")
const p3 = document.createElement("p")


//count3.subscribe(x => p3.innerHTML = `Click count: ${x}`)

d?.appendChild(p3)

Answer 1

我们可以在单击第二个按钮时取消订阅，然后当再次单击第一个按钮时，我们需要清除已经存在的所有订阅，然后重新初始化订阅，最后再次订阅。

如果您发现此困惑，请告诉我，我会澄清您的疑虑。

我不确定您想要实现什么目标，但请使用下面的示例并将其修改为您的用例。

import { mapTo } from 'rxjs/operators';
import { fromEvent, scan, Subscription } from 'rxjs';

const button1 = document.getElementById('but1');
const button2 = document.getElementById('but2');
const button3 = document.getElementById('but3');
let clickCountSubscription = new Subscription();
let interimValue = 0;
const getCount3 = () => {
  let click3 = fromEvent(button3, 'click');
  let three = click3.pipe(mapTo(1));
  return three.pipe(
    scan((acc, val) => {
      interimValue = acc + val;
      return acc + val;
    }, interimValue)
  );
};
let click1 = fromEvent(button1, 'click').subscribe((result) => {
  clickCountSubscription.unsubscribe();
  clickCountSubscription = new Subscription();
  clickCountSubscription.add(
    getCount3().subscribe((x) => (p3.innerHTML = `Click count: ${x}`))
  );
});

let click2 = fromEvent(button2, 'click').subscribe(() => {
  clickCountSubscription.unsubscribe();
});
const d = document.getElementById('d');
const p3 = document.createElement('p');

d?.appendChild(p3);

stackblitz