0

因此，在下面来自GitHub 上 RxJS的示例中，鼠标移动可观察到的“激活”是什么时候，我的意思是，是什么触发它开始对 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';
});

任何见解将不胜感激。

4

1 回答 1

1

由于您的问题的答案，我是 RxJS 的忠实粉丝！

...何时鼠标移动可观察到“激活”，我的意思是，是什么触发它开始对 mousemove 事件进行采样？

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

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

被调用（直到 aftermousedrag.subscribe被调用才被调用）。

如果您查看observable.map的代码，您会看到父级（mousemove在这种情况下）已订阅，并且传入 map 的函数在其onNext事件中被调用。

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

最后，.takeUntil(mouseup)在链末尾调用的方法是.map清理和处理所有内容的地方。该onNextobservable 的 将处理先前的订阅，在示例的情况下，它将是.map函数，也就是事件侦听器。一旦发生mouseup事件，订阅将mousemove被处理并“停用”。

var subscription = ...要对此进行测试，您可以在、return mousemove.map和处设置断点mm.preventDefault();，它们将按以下顺序命中：

  1. var subscription = ...
  2. 鼠标向下
  3. return mousemove.map
  4. 鼠标移动
  5. mm.preventDefault();
  6. 鼠标向上
  7. 鼠标移动，不中断

让我知道这是否有意义，或者如果您对我发布的内容有任何疑问。我可以澄清任何你仍然不明白的事情。

祝你好运！

于 2014-08-06T20:05:15.573 回答