觀察者檢查mousemove的停止時間

Question

當mouseDown Observer中的鼠標移動結束時，我想執行該函數。但是，當我放棄我的鼠標時，onComplete函數不會執行。有什麼建議麼？

var split = $('.drag'); 
var parent = $('.Container'); 

var mouseDowns = Rx.Observable.fromEvent(split, "mousedown"); 
var parentMouseMoves = Rx.Observable.fromEvent(parent, "mousemove"); 
var parentMouseUps = Rx.Observable.fromEvent(parent, "mouseup"); 

var drags = mouseDowns.flatMap(function(e){ 
    return parentMouseMoves.takeUntil(parentMouseUps); 
}); 

drags.subscribe(
    function(e) { 
    var $containerWidth = $('.Container').width(); 
    var clientX = $containerWidth - e.clientX; 

    if (clientX >= 50 && e.clientX >= 50) { 
     $('.left').css('right', clientX); 
     $('.right').css('width', clientX); 
     } 
    }, 
    function(error) { 
     console.log(error); 
    }, 
    function() { 
     console.log('finished'); 
    }); 

jsbin.com url

Answer 1

如果你想檢測拖動事件結束，又名下降，那麼這樣的事情應該做的伎倆：

var drop = mouseDowns.selectMany(
    Rx.Observable.concat([ 
    parentMouseMoves.take(1).ignoreElements(), 
    parentMouseUps.take(1) 
    ]) 
); 

drop.subscribe(function(e) { 
    console.log('finished'); 
}); 

如果最外層的功能是假設返回每次拖動完成時的值，您需要將拖動完成轉換爲最外面可觀察值的「onNext」事件。