RxJs流终止

时间:2015-11-25 19:06:24

标签: javascript rxjs

我是RxJS的新手,对这样的问题感到好奇。假设我有这段代码:

 function getStream(target, event) {
    return Rx.Observable.fromEventPattern(
        function (h) {
            target.on(event, h);
        },
        function (h) {
            target.off(event, h);
        }
    );
}

function setPosition(target, point) {
    target.css({
        top: `${point.top}px`,
        left: `${point.left}px`
    });
}

function getPosition(event) {
    return {
        x: event.pageX,
        y: event.pageY
    };
}

var dragTarget = $("#dragMe");
var dropTarget = $(".dropTarget");

var mouseDown = getStream(dragTarget, "mousedown");
var mouseMove = getStream(dragTarget, "mousemove");
var mouseUp = getStream(dragTarget, "mouseup");
var mouse = mouseDown
    .map((e) => {
        return getPosition(e);
    })
    .flatMap((initialPosition) => {
        return mouseMove.map((e) => {
            var currentPosition = getPosition(e);
            return {
                top: currentPosition.y - initialPosition.y,
                left: currentPosition.x - initialPosition.x
            };
        }).takeUntil(mouseUp.merge(inDropArea));
    });
var coordinates = mouseDown
    .flatMap(() => {
        return mouseMove.map((e) => {
            return $(e.target).offset();
        }).takeUntil(mouseUp);
    });
var inDropArea = coordinates
    .filter((pos) => {
        var dropOffset = dropTarget.offset();
        return pos.left > dropOffset.left && pos.top > dropOffset.top;
    });

mouse.subscribe((val) => setPosition(dragTarget, val));
inDropArea.subscribe((pos) => {
    console.log(pos);
});

这是关于拖动div元素的全部内容。所以问题是为什么当我击中掉落区域时,“鼠标”流(或者更具体地说是返回到flatMap的流)不能完成? Fiddle example

2 个答案:

答案 0 :(得分:0)

您是指流

Public Shared Sub FindStuff() Dim TextFileLocation = "C:\Test\Test.txt" Dim srReader As IO.StreamReader = Nothing srReader = File.OpenText(TextFileLocation) Do Dim strInputFileLine As String = srReader.ReadLine() If strInputFileLine Is Nothing Then Exit Do If strInputFileLine.Contains(Form1.TextBox1.Text) Then MessageBox.Show("Found it") End If Loop

该流确实应该在mouseMove.map((e) => { return $(e.target).offset(); }).takeUntil(mouseUp);上终止。不会终止的内容为mouseup,因为coordinates不会终止,mouseDown不会导致终止。

同样适用于

flatMap

mouseMove.map((e) => { var currentPosition = getPosition(e); return { top: currentPosition.y - initialPosition.y, left: currentPosition.x - initialPosition.x }; }).takeUntil(mouseUp.merge(inDropArea)); 未终止,因为mouse没有,mouseDownmap不会导致终止(与flatMap等{{1}等其他运营商不同等等)。当发生新的take事件时,first将从mousedown发出的可观察值中发出新值。

对于您的用例,该流的终止或不终止是如何解决的?

答案 1 :(得分:0)

mouse不会终止,因为mouseDown不会终止。当您执行flatMap时,您正在做的事情就是说,每次事件通过此处,我都会生成一个新的Observable流,我希望每个ObservablesObservable } flattened ,以便我的流的观察者只能看到这些序列的结果。

因此,除非内部流生成错误,否则整个序列将不会终止,直到外部mouseDown,即mouseDown完成(由于NSManagedObjectContextexecuteFetchRequest,因此不会发生基本上和无限的流)。