2017-03-07 4 views
1

私はRxjsを学びたいと思っています。私は期待していない振る舞いを見ています。問題のJavaScriptコードは、それがdoubleストリームの出力は、新たな乱数ではなく、sourceから来た乱数のdouble型の値があることが判明しRxJSはMath.random()でうまくいきません

function updateText(css_link, observable){ 
    observable.subscribe(x => { 
    const container = document.querySelector(css_link); 
    container.textContent = `${x}`; 
    }); 
} 

function log(observable) { 
    observable.subscribe(i => { 
    console.log(i); 
    }); 
} 

let source = Rx.Observable.timer(0, 1000) 
    .map(() => {return {value: Math.random()}}); 

let double = source 
    .map(x => {return {value: x.value * 2}}); 

let diff = source 
    .pairwise() 
    .map(a => JSON.stringify(a)); 

updateText("#source", source.map(x => x.value)); 
updateText("#double", source.map(x => x.value)); 
updateText("#diff", diff); 

の下に表示されます。 diffの出力を見ると、ランダムな数字がsourcedoublediffというように独立して生成されるという印象が再び得られます。

私はRxjsを学習していますが、ポイントがありません。私は、これらの流れは不変だと考えましたが、それらは互いに依存しています。

このコードのバージョンは、jsbinにあります。一部のhtmlは更新されています。

答えて

2

これは、登録するたびに新しいソースObservableで新しいチェーンを作成するためです。つまり、source,doublediffのそれぞれに独自のタイマーがあります。

あなたは、これはあなたが新しいタイマーを作成しているたびに、コンソールにメッセージを印刷することにより、真であることがわかります。

let source = Rx.Observable.defer(() => { 
    console.log('new source'); 
    return Rx.Observable.timer(0, 1000) 
    .map(() => {return {value: Math.random()}}); 
}); 

は今、あなたはコンソールの3つのメッセージ "new source"が表示されます。

1つのソースObservableを共有する場合は、マルチキャスト、特にshare()演算子を使用できます。

let source = Rx.Observable.defer(() => { 
    console.log('new source'); 
    return Rx.Observable.timer(0, 1000) 
    .map(() => {return {value: Math.random()}}); 
}).share(); 

今、あなたはコンソールに一つだけ"new source"を参照してくださいよ、あなたが期待するとして、それが動作するはずです。

だからあなたのソースは次のようになります。

let source = Rx.Observable.timer(0, 1000) 
    .map(() => {return {value: Math.random()}}) 
    .share(); 

更新されたデモ:https://jsbin.com/guyigox/3/edit?js,console,output

関連する問題