angular2+ 两个div双向滚动的优化

Question

两个div双向滚动的优化

附上未优化代码：
html：

<div #left (scroll)="scroll($event,'right')">
</div>
<div #right (scroll)="scroll($event,'left')">
</div>

ts:

 @ViewChild('left') left: ElementRef;
 @ViewChild('right') right: ElementRef;
scroll(e, position) {
    this[position].nativeElement.scrollTop = e.target.scrollTop;
    this[position].nativeElement.scrollLeft = e.target.scrollLeft;
  }

这样的结果就是在设置scrollTop和scrollLeft的时候会触发目标dom的scroll函数导致频繁调用，具体表现就是滚动卡顿（鼠标滑轮滚动）

搜到的jquery答案是这样：

//HTML代码
<div id="test_Left" onScroll="moveUp_Left();" ></div>
<div id="test_Right"onScroll="moveUp_Right();"  ></div>

//JS代码
var timer = null;

//左侧DIV的滚动事件
function moveUp_Left()
{
    //先删除右侧DIV的滚动事件，以免自动触发
    $("#test_Right").removeAttr("onScroll");

    //正常设值，同步两个DIV的滚动幅度
    $("#test_Right").scrollTop($("#test_Left").scrollTop());
    
    //取消延迟预约。【重点】鼠标滚动过程中会多次触发本行代码，相当于不停的延迟执行下面的预约
    clearTimeout(timer);

    //延迟恢复（预约）另一个DIV的滚动事件，并将本预约返回给变量[timer]
    timer = setTimeout(function() {
        $("#test_Right").attr("onScroll","moveUp_Right();");
    }, 300 );
}

//右侧DIV的滚动事件（原理同上）
function moveUp_Right()
{
    $("#test_Left").removeAttr("onScroll");
    $("#test_Left").scrollTop($("#test_Right").scrollTop());
    clearTimeout(timer);
    timer = setTimeout(function() {
        $("#test_Left").attr("onScroll","mymoveUp_UI03_Left();");
    }, 300 );
}

亲测可行，求问在angular2以上版本怎么去实现类似效果。

Answer 1

既然都用angular2了，处理这种情况当然要考虑用rxjs来做了。
rxjs是可以通过监听dom事件来创建一个observable的。
同时Observable也提供了Api, 比如debounceTime，distinctUntilChanged 都可以减少对dom的频繁修改，提升滑动效果。

leftScroll: Subscription = null;
rightScroll: Subscription = null;

this.leftScroll= Observable.fromEvent(this.leftDiv, 'scroll')
            .distinctUntilChanged()
            .debounceTime(500)
            .subscribe((event: Event) => {
                this.handleScroll(this.leftDiv);
            });
this.rightScroll= Observable.fromEvent(this.rightDiv, 'scroll')
            .distinctUntilChanged()
            .debounceTime(500)
            .subscribe((event: Event) => {
                this.handleScroll(this.rightDiv);
            });

rxjs