javascript - 使用 RxJS 检测事件之间的长间隔

Question

我正在尝试在模型示例中捕获长按事件。请看下面的代码:

var Rx = require('rx'),
Observable = Rx.Observable;

var downEvents = [
// {'type': 'down', 'time': 50},
// {'type': 'down', 'time': 80},
// {'type': 'down', 'time': 140},
   {'type': 'down', 'time': 250}
];

var upEvents = [
// {'type': 'up', 'time': 60},
// {'type': 'up', 'time': 90},
// {'type': 'up', 'time': 150},
   {'type': 'up', 'time': 850}
];

var downStream = Observable.from(downEvents).flatMap(function(event) {
    return Observable.just(event.type).delay(event.time);
});

var upStream = Observable.from(upEvents).flatMap(function(event) {
    return Observable.just(event.type).delay(event.time);
}); 

var longClicks = downStream.flatMap(function(d) {
    return Observable.just(d).delay(400).takeUntil(upStream);
});

longClicks.subscribe(function(x) {
    console.log('long click: ' + x);
});

它会捕获该单个事件。但如果我取消评论以前的事件，它将什么也得不到。谁能帮我理解这是为什么？

对于 UI 事件，相同的代码可以正常工作:https://jsfiddle.net/zjor/0uqaw936/

Answer 1

是因为takeUntil ，所以这段代码 Observable.just(d).delay(400).takeUntil(upStream); 意味着从这个可观察的 Observable.just(d).delay(400) 中获取元素code> 直到 upStream 产生一个值。如果延迟太大，那么上游将在延迟到期之前生成所有值。因此没有语句打印到控制台。

让我们再次举例说明您的代码:

在这个实例中，我将延迟时间设置为 59，并打印了一条控制台语句

var downEvents = [{
        'type': 'down',
        'time': 50
    },


];

var upEvents = [{
    'type': 'up',
    'time': 60
}, ];

var downStream = Rx.Observable.from(downEvents).flatMap(function(event) {
    return Rx.Observable.just(event.type).delay(event.time);
});

var upStream = Rx.Observable.from(upEvents).flatMap(function(event) {
    return Rx.Observable.just(event.type).delay(event.time);
});


var longClicks = downStream.flatMap(function(d) {
    console.log(d);
    return Rx.Observable.just(d).delay(59).takeUntil(upStream);
});

longClicks.subscribe(function(x) {
    console.log('long click: ' + x);
});

如果我将延迟时间更改为61，那么将没有输出可用

var downEvents = [{
        'type': 'down',
        'time': 50
    },


];

var upEvents = [{
    'type': 'up',
    'time': 60
}, ];

var downStream = Rx.Observable.from(downEvents).flatMap(function(event) {
    return Rx.Observable.just(event.type).delay(event.time);
});

var upStream = Rx.Observable.from(upEvents).flatMap(function(event) {
    return Rx.Observable.just(event.type).delay(event.time);
});


var longClicks = downStream.flatMap(function(d) {
    console.log(d);
    return Rx.Observable.just(d).delay(61).takeUntil(upStream);
});

longClicks.subscribe(function(x) {
    console.log('long click: ' + x);
});