javascript - 响应式(Reactive)表达式中的热可观察序列是由什么开始的

Question

因此，在以下来自 RxJS on GitHub 的示例中，鼠标移动何时可观察到“激活”，我的意思是，是什么触发它开始采样 mousemove 事件？

我认为订阅会标记 mousedrag 中所有可观察值的序列的开始，但情况似乎并非如此。显然，在mousedown之前有mousemove事件，但这些事件从来没有被使用过。

var dragTarget = document.getElementById('dragTarget');

// Get the three major events
var mouseup   = Rx.Observable.fromEvent(dragTarget, 'mouseup');
var mousemove = Rx.Observable.fromEvent(document,   'mousemove');
var mousedown = Rx.Observable.fromEvent(dragTarget, 'mousedown');

var mousedrag = mousedown.flatMap(function (md) {
    // calculate offsets when mouse down
    var startX = md.offsetX, startY = md.offsetY;

    // Calculate delta with mousemove until mouseup
    return mousemove.map(function (mm) {
        mm.preventDefault();

        return {
            left: mm.clientX - startX,
            top: mm.clientY - startY
        };
    }).takeUntil(mouseup);
});

// Update position
var subscription = mousedrag.subscribe(function (pos) {          
    dragTarget.style.top = pos.top + 'px';
    dragTarget.style.left = pos.left + 'px';
});

如有任何见解，我们将不胜感激。

Answer 1

因为你问题的答案，我成为了 RxJS 的忠实粉丝!

...when is the mouse move observable 'activated', by which I mean, what triggers it to start sampling the mousemove event?

鼠标移动可观察在需要时被“激活”(真正的术语是“订阅”)，然后在不需要时被处置!您提供的示例中事件绑定(bind)发生的确切位置是在

之后

返回 mousemove.map(function (mm) { ... })

被调用(直到调用mousedrag.subscribe之后才会被调用)。

如果您在代码中查找 observable.map ，您将看到父级(在本例中为 mousemove)已订阅，并且传递到 map 的函数在其 onNext 事件内被调用。

如果你深入兔子洞，你会发现 Observable.fromEvent这是事件监听发生的准确位置，但出于所有意图和目的，在 observable.map 函数中调用的 subscribe 方法是它被“激活”的地方。

最后，在 .map 链末尾调用的 .takeUntil(mouseup) 方法是清理和处置所有内容的地方。该可观察对象的 onNext 将处理先前的订阅，在本例中，该订阅将是 .map 函数，也称为事件监听器。一旦发生 mouseup 事件，mousemove 的订阅就会被释放并“停用”。

要测试这一点，您可以在 var subscription = ...、return mousemove.map 和 mm.preventDefault(); 处设置断点>，它们将按以下顺序被击中:

1. var 订阅 = ...
2. 鼠标按下
3. 返回mousemove.map
4. 鼠标移动
5. mm.preventDefault();
6. 鼠标悬停
7. 鼠标移动，不中断

如果这有意义，或者您对我发布的内容有任何疑问，请告诉我。有什么不懂的地方我可以帮你解答。

祝你好运!