Rx.Observable.merge不起作用

我正嘗試使用Rxjs構建一個示例停止監視應用程序。但是，當我嘗試合併暫停和重置流時，它不起作用。這是我的代碼。Rx.Observable.merge不起作用

// What we need 
 
/* 
 
    1. interval observer 
 
    2. click streams from 3 buttons 
 
*/ 
 

 
const startButton = document.querySelector("#start") 
 
const stopButton = document.querySelector("#stop") 
 
const resetButton = document.querySelector("reset") 
 

 
const start$ = Rx.Observable.fromEvent(startButton, 'click') 
 
const stop$ = Rx.Observable.fromEvent(stopButton, 'click') 
 
const reset$ = Rx.Observable.fromEvent(resetButton, 'click') 
 

 
const interval$ = Rx.Observable.interval(1000) 
 

 
const stopOrReset$ = Rx.Observable.merge(
 
    stop$, 
 
    reset$ 
 
) 
 

 
const pausible$ = interval$ 
 
    .takeUntil(stopOrReset$) 
 

 
const init = 0 
 
const inc = acc => acc + 1 
 
const reset = acc => init 
 

 
const incOrReset$ = Rx.Observable.merge(
 
    pausible$.mapTo(inc), 
 
    reset$.mapTo(reset) 
 
) 
 

 
app$ = start$ 
 
    .switchMapTo(incOrReset$) 
 
    .startWith(init) 
 
    .scan((acc, currFunc) => currFunc(acc)) 
 
    .subscribe(val => console.log(val))

body { 
 
    background: #ffa600; 
 
    font-family: "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    wdith: 800px; 
 
    margin: 50px auto; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
#clock { 
 
    margin: 5$ auto; 
 
    font-size: 4em; 
 
} 
 

 
button { 
 
    border-radius: 5px; 
 
    background: #fffa600; 
 
    color: #fff; 
 
    border: solid 1px #fff; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    font-size: 1.2em; 
 
    padding: 18px 10px; 
 
    width: 180px; 
 
    margin: 10px; 
 
    outline: none; 
 
} 
 

 
button:hover { 
 
    transition: all 0.5s ease-in-out; 
 
    background: #fff; 
 
    border: solid 1px #fff; 
 
    color: #ffa600; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="description" content="Ractive JavaScript Stop Watch Application"> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <button id="start">Start</button> 
 
    <button id="stop">Stop</button> 
 
    <div id="clock"> 
 
     <span id="minutes"></span>: 
 
     <span id="seconds"></span>: 
 
     <span id="milliseconds"></span> 
 
    </div> 
 
    <button id="reset">Reset</button> 
 
    </div> 
 
    <script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script> 
 
</body> 
 

 
</html>

如果你運行這段代碼，你會看到.switchMapTo(incOrReset$)功能不能正常工作。而所有的控制檯吐出的0

來源

2017-04-02 Amen Ra

我沒有爲const resetButton = document.querySelector("reset")

這是問題的一個#

const startButton = document.querySelector("#start") 
 
const stopButton = document.querySelector("#stop") 
 
const resetButton = document.querySelector("#reset") 
 

 
const start$ = Rx.Observable.fromEvent(startButton, 'click') 
 
const stop$ = Rx.Observable.fromEvent(stopButton, 'click') 
 
const reset$ = Rx.Observable.fromEvent(resetButton, 'click') 
 

 
const interval$ = Rx.Observable.interval(1000) 
 

 
const pausible$ = interval$ 
 
          .takeUntil(stop$) 
 

 
const init = 0 
 
const inc = acc => acc+1 
 
const reset = acc => init 
 

 
const incOrReset$ = Rx.Observable.merge(
 
    pausible$.mapTo(inc), 
 
    reset$.mapTo(reset) 
 
) 
 

 
app$ = start$ 
 
    .switchMapTo(incOrReset$) 
 
    .startWith(init) 
 
    .scan((acc, currFunc) => currFunc(acc)) 
 
    .subscribe(val => console.log(val))

body{ 
 
    background: #ffa600; 
 
    font-family: "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
    height: 100%; 
 
} 
 
.wrapper{ 
 
    wdith: 800px; 
 
    margin: 50px auto; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 
#clock{ 
 
    margin: 5$ auto; 
 
    font-size: 4em; 
 
} 
 
button{ 
 
    border-radius: 5px; 
 
    background: #fffa600; 
 
    color: #fff; 
 
    border: solid 1px #fff; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    font-size: 1.2em; 
 
    padding: 18px 10px; 
 
    width: 180px; 
 
    margin: 10px; 
 
    outline: none; 
 
} 
 
button:hover{ 
 
    transition: all 0.5s ease-in-out; 
 
    background: #fff; 
 
    border: solid 1px #fff; 
 
    color: #ffa600; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="description" content="Ractive JavaScript Stop Watch Application"> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="wrapper"> 
 
    <button id="start">Start</button> 
 
    <button id="stop">Stop</button> 
 
    <div id="clock"> 
 
     <span id="minutes"></span>: 
 
     <span id="seconds"></span>: 
 
     <span id="milliseconds"></span> 
 
    </div> 
 
    <button id="reset">Reset</button> 
 
    </div> 
 
    <script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script> 
 
</body> 
 
</html>

來源

2017-04-02 03:10:54

Rx.Observable.merge不起作用

回答

相關問題