system.reactive - 如何取消组合的 RxJS 可观察对象

Question

伙计们，我有一个使用 RxJS 处理鼠标事件的应用程序。我将这些事件组合成更复杂的可观察“手势”。一种这样的手势是“摇晃”。

我试图撰写的一系列事件是：

mousedown  
mousemove left  
mousemove right  
mousemove left  
mousemove right  
mouseup

我发现的是

mousedown  
mouseup
mousemove left  
mousemove right  
mousemove left  
mousemove right  

也触发了相同的结果。

我在 codepen 上演示了这个问题。

我的一般问题是：你如何在 RxJS 中表达一个 observable，例如 mouseup，应该取消并重新启动 observable 的组合？

作为问题的另一个示例（来自同一个小提琴），以下事件

mousedown  
mouseup
mousedown  
mouseup
mousedown  
mousemove left  
mousemove right  
mousemove left  
mousemove right  

导致 3 次摇晃事件。我希望它产生一个。

Answer 1

利用takeUntil

var down = $div.onAsObservable('mousedown');
var up = $div.onAsObservable('mouseup');
var move = $div.onAsObservable('mousemove');

var shake = down.flatMapLatest(function (downev) {
            var current = downev;
            return move
                .map(function (ev) {
                    var delta = ev.pageX - current.pageX;
                    current = ev;
                    return delta < 0 ? 'left' : 'right';
                 })
                .takeUntil(up)
                .toArray();
        })
        .subscribe(function (moves) {
            // see if moves is an array of left,right,...