删除按钮单击事件，直到最后一个重置事件不起作用答案

【问题标题】：Dropping button click events until last reset event not working删除按钮单击事件，直到最后一个重置事件不起作用
【发布时间】：2016-09-19 06:26:01
【问题描述】：

使用 cycle.js 和 xstream，我想计算按钮点击次数并重置它们。

我计划通过在最后一次重置后计算所有按钮点击来实现这一点。为此，我考虑放弃所有按钮点击，直到最后一次重置，然后计算剩下的内容。

但是，我剩下 2 个按钮不起作用

有什么建议吗？

function main(sources: ISources): ISinks {
  const dom = sources.dom;
  const resetClick$ = dom.select("#resetButton")
    .events("click")
    .map(ev => 0)
    .startWith(0)

  const button1Click$ = dom.select("#button1")
    .events("click")
    .compose(dropUntil(resetClick$.last()))
    .map(ev => 1)
    .fold((acc, n) => acc + n, 0)
    .startWith(0)

  const button2Click$ = dom.select("#button2")
    .events("click")
    .compose(dropUntil(resetClick$.last()))
    .map(ev => 1)
    .fold((acc, n) => acc + n, 0)
    .startWith(0)

  const vtree$ = Stream.combine(button1Click$, button2Click$)
    .map(n =>
      div([
        input("#button1", { attrs: { type: "button", value: "Click Me!"}}),
        input("#button2", { attrs: { type: "button", value: "Click Me!"}}),
        input("#resetButton", { attrs: { type: "button", value: "Reset!"}}),
        p(["Clicks: " + n[0] + " + " + n[1]]),
        p(["Click total: " + (n[0] + n[1])])
      ])
    )

  const sinks: ISinks = {
    dom: vtree$
  };
  return sinks;
}

【问题讨论】：

标签： javascript reactive-programming frp cyclejs xstream-js

【解决方案1】：

const resetClick$ = dom.select("#resetButton")
  .events("click")
  .map(ev => 0)

const button1Click$ = dom.select("#button2")
    .events("click")
    .map(ev => 1)

const button1WithReset$ = Stream.merge(button1Click, resetClick$)
  .fold((acc, n) => { 
      if (n == 0) return 0
      else return acc + n
  }, 0)

这应该可以解决问题。然后你可以对button2Click 做同样的事情。

通过合并button1click$ 和resetClick$，我们得到一个流，它要么发出0，要么发出1。并且使用 fold，我们可以在每次合并流发出 0 时重置计数器。

【讨论】：