2

我试图找到最优雅的方式来区分 Bacon.js 中的单击和双击，但我觉得我并没有完全掌握它是如何工作的。以下适用于检测双击，但对于如何优雅地为单击事件指定不同的行为（即不同的回调函数），我有点难过。

  clicked = Bacon.fromEventTarget(document, "click")
  clicked.bufferWithTimeOrCount(300, 2)
          .filter((x) -> x.length is 2)
          .onValue (x) ->
            console.log "double clicked: ", x
4

2 回答 2

4

单独使用“dblclick”可能会更好 - 您将避免需要指定自己的时间间隔来计算单击与双击的时间间隔。另一方面，直接使用“click”/“dblclick”两个事件都将在双击的情况下被触发。

如果您更喜欢指定自己的逻辑，那么可能就像对长度进行不同的过滤一样：

clicked = Bacon.fromEventTarget(document, "click")
buffered = clicked.bufferWithTimeOrCount(300, 2)
buffered.filter((x) -> x.length is 2)
        .onValue (x) ->
          console.log "double clicked: ", x            
buffered.filter((x) -> x.length is 1)
        .onValue (x) ->
          console.log "single clicked: ", x

此外，也许可以通过使用 flatmap 创建单个点击流来使其更加优雅：

clicks = clicked.bufferWithTime(300)
   .flatMap((x) ->
     if (x.length < 2) 
       Bacon.once("single")
     else 
       Bacon.once("double")
   )

然后你可以做你的 onValue 并比较这些值。

通过执行 bufferWithTime （不计），您也可以将三次单击归类为双击，但这取决于您想要的行为是什么。

于 2013-08-05T15:36:13.137 回答
2

我对 FRP 很陌生，但是做这样的事情不是更好吗？

var clicks = Bacon.fromEventTarget(document, 'click').merge(
    Bacon.fromEventTarget(document, 'dblclick')
);

clicks.onValue(event, function(ev) {
    if (ev.type === 'click') ...
    else if (ev.type === 'dblclick') ...
});
于 2014-04-20T05:30:17.907 回答