如何在 RxJS 中超时事件? [英] How do I timeout an event in RxJS?

问题描述

我试图检测 mousedown 事件是否在 mouseup 之前保持一段时间.

I'm trying to detect if the mousedown event is held for a period of time before a mouseup.

我在用 fromEvent() 创建的 Observable 上使用 timeout() 这样做，但超时返回两个 Observables.

I'm using timeout() on an Observable created with fromEvent() to do so, but the timeout returns both Observables.

下面，如果mousedown在1秒内被触发，订阅流返回事件，但它也返回1.

Below, subscribing to stream returns the event if mousedown is triggered within 1 second, but it also returns 1.

var mousedown = Rx.Observable.fromEvent(target, 'mousedown');
var stream = mousedown.timeout(1000, Rx.Observable.return(1));

var sub = stream.subscribe(
    function (x) { 
        console.log('Next: '+x);
    },
    function (err) {
        console.log('Err: '+err);
    },
    function () {
        console.log('Complete');
    }
);

但是，这按预期工作:

var source = Rx.Observable.return(42)
    .delay(200)
    .timeout(1000, Rx.Observable.return(1));

我希望这段代码能够工作:

I'd like this code to work:

var mousedown = Rx.Observable.fromEvent(target, 'mousedown');
var mouseup = Rx.Observable.fromEvent(target, 'mouseup');

var clickhold = mousedown
.flatMap(function (){
    return mouseup.timeout(1000, Rx.Observable.return('hold'));
})
.filter(function (x) {
    return x === 'hold';
});

clickhold.subscribe(
    function (x) { 
        console.log('Next: '+x);
    },
    function (err) {
        console.log('Err: '+err);
    },
    function () {
        console.log('Complete');
    }
);

推荐答案

而不是使用 超时，我使用了delay 和 takeUntil:

Instead of using timeout, I used delay and takeUntil:

var target,
    mousedown,
    mouseup;

target = document.querySelector('input');

mousedown = Rx.Observable.fromEvent(target, 'mousedown');
mouseup = Rx.Observable.fromEvent(target, 'mouseup');

var clickhold = mousedown
    .flatMap(function(){
        // Triggered instantly after mousedown event.
        return Rx.Observable
            .return('hold')
            .delay(1000)
            // Discards the return value if by the time .delay() is complete
            // mouseup event has been already completed.
            .takeUntil(mouseup);
    });

clickhold.subscribe(
        function (x) { 
            console.log('Next: ' + x);
        },
        function (err) {
            console.log('Err: ' + err);
        },
        function () {
           console.log('Complete');
        }
    );

<script src='https://rawgit.com/Reactive-Extensions/RxJS/v.2.5.3/dist/rx.all.js'></script>

<input type='button' value='Button' />

这篇关于如何在 RxJS 中超时事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！