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的忠实粉丝！

...什么时候鼠标移动可观察'激活'，我的意思是什么触发它开始采样mousemove事件？

鼠标移动可观察是在需要的时刻被“激活”（真正的术语是“订阅”），然后处理它不是！在您提供的示例中，事件绑定的确切位置是在

之后

return mousemove.map(function (mm) { ... })

调用

（直到调用mousedrag.subscribe后才调用。）

如果您查看observable.map的代码，您将看到父订阅（在这种情况下为mousemove）订阅，并且传递给map的函数在其onNext内调用事件。

如果你深入挖掘兔子洞，你会遇到Observable.fromEvent这是发生事件监听的完全位置，但是对于所有意图和目的，订阅方法在observable.map函数中调用它是“激活”的地方。

最后，在.takeUntil(mouseup)链末尾调用的.map方法是清理和处理所有内容的地方。该可观察对象的onNext将处理先前的订阅，在该示例的情况下，将是.map函数，即事件监听器。发生mouseup事件后，mousemove的订阅将被处理并“停用”。

要对此进行测试，您可以在var subscription = ...，return mousemove.map和mm.preventDefault();设置断点，然后按以下顺序设置断点：

var subscription = ...
鼠标按下
return mousemove.map
鼠标移动
mm.preventDefault();
鼠标移动
鼠标移动，没有中断

如果这有意义，或者如果您对我发布的内容有任何疑问，请告诉我。我可以澄清你仍然不理解的任何事情。

什么在反应式表达式中启动热的可观察序列

1 个答案: