Обработка двойных кликов И один клик изящно с 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 

Кроме того, возможно, это можно было бы сделать более изящным, используя flatmap, чтобы создать единый поток от кликов:

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

Затем вы можете сделать свой onValue и сравнить значения.

Путем выполнения bufferWithTime (без учета) вы также классифицируете тройной щелчок как двойной щелчок, но это зависит от вашего желаемого поведения.

Answer 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') ... 
});