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"을 사용하여 더 나을 것입니다 - 당신은으로 간주 것을 위해 자신의 시간 간격을 지정할 필요 피할 대 더블 클릭 하나를 클릭합니다. 다른 한편, "클릭"/ "dblclick"을 사용하면 더블 클릭시 두 이벤트가 모두 실행됩니다. 단일 스트림을 생성 flatmap을 사용하여 또한

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 (개수 제외)을 수행하면 트리플 클릭도 더블 클릭으로 분류되지만 원하는 동작이 무엇인지에 따라 다릅니다.

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