删除按钮点击事件，直到上次重置事件不起作用

问题描述：

使用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; 
}

答

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。并且使用折叠，我们可以在每次合并流发出0时重置计数器。

删除按钮点击事件，直到上次重置事件不起作用

相关推荐