如何取消组合的 RxJS 可观察对象

Question

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

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

mousedown  
mousemove left  
mousemove right  
mousemove left  
mousemove right  
mouseup

我发现

mousedown  
mouseup
mousemove left  
mousemove right  
mousemove left  
mousemove right  

也触发了同样的结果。

我已经发了a fiddle demonstrating the issue on codepen。

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

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

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,...