javascript - RxJS 监听事件但稍后附加事件监听器

Question

使用 RxJS，我想订阅事件。问题是:我想在设置事件监听器之前设置 Observable。

将其想象成两个按钮:按钮 1 在被单击时执行某些操作，但仅在按钮 2 将事件监听器附加到按钮 1 之后。观察者应该订阅 button1 的点击事件。所有这些都应该在应用程序启动时连接在一起。 Button2 不应该设置观察者!一些没有 RxJS 的代码:

button2.addEventListener('click', function() {
    // [...] some code to prevent that button1 has more than one event listener

    // attach event listener to button1
    button1.addEventListener('click', clickHandler);

    // now let observer subscribe itself to clickHandler somehow
    // -> HOW?
});


function clickHandler() {
    console.log("clicked");
}

编辑:也许，是否有可能观察到某种从不发出任何东西但在单击 button2 或类似事件后变成真正的事件处理程序 (clickHandler) 的虚拟事件处理程序？!

Edit2:我注意到 2 个按钮并不是最好的例子。让我们让它有所不同，并通过某种未知机制附加 button2 的事件监听器。例如:

// is called by unkown means, i. e. the observer doesn't know how and when its attached
function attach() {
    button1.addEventListener('click', clickHandler);
}

但是当 attach() 被调用时，Observer 应该订阅 clickHandler。或者可能 Observer 一直订阅某个函数，attach() 将函数替换为实际的事件监听器。不知道。

Answer 1

据我了解，您想创建一个 Observable，它会在 每次单击 button1，但仅在 button2 被单击之前的某个时间之后。

然后这应该工作:

var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');

var onButton2Click$ = Rx.Observable.fromEvent(button2, 'click').take(1);
var onButton1Click$ = Rx.Observable.fromEvent(button1, 'click').skipUntil(onButton2Click$);


onButton1Click$.subscribe(function(event) {
  console.log('button 1 clicked')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.3/Rx.min.js"></script>

<button id="button1">button 1</button>
<button id="button2">button 2</button>

应该清楚fromEvent是什么方法确实如此。

take带有参数 1 的运算符确保 onButton2Click$ observable 仅发出 1 个项目然后完成。

skipUntil运算符确保 onButton1Click$ observable 仅开始发射项目，直到 onButton2Click$ observable 发射至少 1 个项目。

对于编辑后的问题:

var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');

var onAttach$$ = new Rx.Subject();

function attach() {
  onAttach$$.next();
  onAttach$$.complete();
}

var onButton1Click$ = Rx.Observable.fromEvent(button1, 'click').skipUntil(onAttach$$);

// for testing only
button2.addEventListener('click', function(e) {
  attach();
});

onButton1Click$.subscribe(function(event) {
  console.log('button 1 clicked')
});

onAttach$$.subscribe(function() { 
  console.log('attached listener')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.3/Rx.min.js"></script>

<button id="button1">button 1</button>
<button id="button2">attach</button>