2016-07-21 8 views
3

モデルの例でロングプレスイベントをキャプチャしようとしています。以下のコードを参照してください:RxJSによるイベント間の長い間隔の検出

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/

答えて

1

それが理由takeUntilであったので、このコードObservable.just(d).delay(400).takeUntil(upStream);upStreamが値を生成するまで、この観測可能Observable.just(d).delay(400)から要素を得ることを意味します。 遅延が大きすぎる場合、遅延が期限切れになる前にすべての値が生成されます。したがって、コンソールには何も表示されませんでした。

てみましょうたとえば、あなたのコードをもう一度:

このインスタンスに、私は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); 
}); 

を印刷しています出力はありません

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); 
}); 
関連する問題