반응식에서 뜨거운 관찰 가능한 시퀀스를 시작하는 것

Question

다음 예제에서 RxJS on GitHub의 다음 예에서 마우스 이동이 관찰 가능 '활성화 됨'인 경우, mousemove 이벤트 샘플링을 시작하는 트리거는 무엇입니까?

나는 subscribe가 mousedrag의 모든 observables에 대한 시퀀스의 시작을 표시한다고 생각했지만 그럴 듯하지는 않습니다. 분명히 mousedown 전에 mousemove 이벤트가 있지만 이러한 이벤트는 사용되지 않습니다.

var dragTarget = document.getElementById('dragTarget'); 

// Get the three major events 
var mouseup = Rx.Observable.fromEvent(dragTarget, 'mouseup'); 
var mousemove = Rx.Observable.fromEvent(document, 'mousemove'); 
var mousedown = Rx.Observable.fromEvent(dragTarget, 'mousedown'); 

var mousedrag = mousedown.flatMap(function (md) { 
    // calculate offsets when mouse down 
    var startX = md.offsetX, startY = md.offsetY; 

    // Calculate delta with mousemove until mouseup 
    return mousemove.map(function (mm) { 
     mm.preventDefault(); 

     return { 
      left: mm.clientX - startX, 
      top: mm.clientY - startY 
     }; 
    }).takeUntil(mouseup); 
}); 

// Update position 
var subscription = mousedrag.subscribe(function (pos) {   
    dragTarget.style.top = pos.top + 'px'; 
    dragTarget.style.left = pos.left + 'px'; 
}); 

어떤 통찰력도 인정 될 것입니다.

Answer 1

저는 질문에 대한 답변 때문에 RxJS의 팬입니다!

... 마우스 이동이 관찰 가능 '활성화 됨'인 경우, mousemove 이벤트를 샘플링하기 시작하는 트리거는 무엇입니까?

관찰 가능한 마우스 이동은 필요한 시점에 "활성화"(실제 구독은 "가입"됨)되고 순간적으로 처리됩니다. 바인딩 이벤트가 제공된 예에서 발생 정확한 위치는 (하지 mousedrag.subscribe가 호출 될 때까지 호출되는)

return mousemove.map(function (mm) { ... })

가 호출 된 이후이다.

observable.map의 코드를 보면 부모 (이 경우 mousemove)가 구독 중이며 map에 전달 된 함수가 onNext 이벤트 내에서 호출됨을 알 수 있습니다. 당신은 토끼 구멍 아래로 깊이 파고 경우

, 당신은 이벤트 청취가 발생 정확한 위치 인 Observable.fromEvent 건너 겠지만, 모든 의도와 목적 들어, observable.map 함수에서 호출 된 가입 방법은 어디입니까 "활성화 됨"입니다.

마지막으로, .map 체인의 끝에서 호출되는 .takeUntil(mouseup) 메서드는 모든 것이 정리되고 처리되는 곳입니다. 해당 관찰자에 대한 onNext은 이전 구독을 처리합니다. 예를 들어 .map 함수는 이벤트 수신기입니다. mouseup 이벤트가 발생하면 mousemove에 대한 구독이 처리되고 "비활성화"됩니다.

이를 테스트하려면 var subscription = ..., return mousemove.map 및 mm.preventDefault();에 중단 점을 설정 할 수 있으며, 그들은 순서로 타격을받을 것이다 : 아래로

return mousemove.map

1. var subscription = ...
2. 마우스 마우스 이동
3. mm.preventDefault();
4. 위로 마우스
5. 마우스 이동, 더는

그 말이 알려줘 파괴하지 않거나 당신은 내가 무엇을 게시에 대한 질문이있는 경우. 당신이 아직도 이해하지 못하는 것을 분명히 할 수 있습니다.

행운을 빈다.