在 takeUntil 之后做一些动作

问题描述

我一直在监听 mousemove 事件，直到 mouseup.我是用 takeUntil 来做的.

I'm listening to mousemove event until mouseup. I'm doing it with takeUntil.

我的代码:

    const onMouseMove = fromEvent(window, "mousemove");
    const onMouseUp = fromEvent(window, "mouseup");

    const resizePanel = onMouseMove
        .pipe(
            takeUntil(onMouseUp),
            map(
                (event: MouseEvent) => {
                    this.isDragging = true;
                    this.resizePanel(event.clientX);
                }
            )
        );

我有一个变量 isDragging: boolean，我想将它设置为 false，当 mouseup 发生时，例如在我的代码中 takeUntil 之后.一定很简单，但我想不通.

I have one variable isDragging: boolean, which I want to set to false, when mouseup occurs, e.g. after takeUntil in my code. It must be simple, but I can't figure it out.

推荐答案

您可以在 onMouseMove$ 和 onMouseUp$ 上使用 combineLatest 并在 takeUntil 中使用 finalize 主题.

You could use combineLatest on onMouseMove$ and onMouseUp$ and use a finalise subject in takeUntil.

const { fromEvent, combineLatest, Subject } = rxjs;
const { takeUntil } = rxjs.operators;

const onMouseMove$ = fromEvent(window, "mousemove");
const onMouseUp$ = fromEvent(document, "mouseup");

const finalise = new Subject();

combineLatest(onMouseMove$, onMouseUp$).pipe(takeUntil(finalise)).subscribe(([onMouseMove, onMouseUp]) => {
  if (onMouseUp) {
    console.log('mouse up');
    finalise.next(true);
    finalise.complete();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.min.js"></script>

这篇关于在 takeUntil 之后做一些动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！