Question

我正在尝试使用Rxjs构建一个示例秒表应用程序。但是当我尝试合并暂停和重置流时，它不起作用。这是我的代码。

// 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

Answer 1

#

我没有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>

Rx.Observable.merge不起作用

1 个答案: