javascript - 使用 FRP 和 Bacon.js 优雅地处理双击和单击

Question

我试图找到在 Bacon.js 中区分单击和双击的最优雅的方法，但我觉得我没有完全理解它是如何工作的。以下适用于检测双击，但我对如何优雅地为单击事件指定不同的行为(即不同的回调函数)感到有点困惑。

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

Answer 1

您可能最好单独使用“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

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

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

然后您可以执行 onValue 并比较值。

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