javascript - 带条件的 RxJs mousemove 事件

Question

我正在为此苦苦挣扎，但我不知道如何继续。我只想当用户停止使用 mousemove 一段时间并且它位于特定元素内时捕获鼠标事件。

const { fromEvent } = rxjs;
const { debounceTime, tap, filter } = rxjs.operators;

const square = document.querySelectorAll("#square");

let isCursorOverSquare = true;

const move$ = fromEvent(square, "mousemove");
const enter$ = fromEvent(square, "mouseenter");
const leave$ = fromEvent(square, "mouseleave");

enter$.pipe(
    tap(() => isCursorOverSquare = true)
).subscribe();

leave$.pipe(
    tap(() => isCursorOverSquare = false)
).subscribe();

move$
.pipe(
    debounceTime(2000),
    filter(() => isCursorOverSquare)
)
.subscribe(
   (e) => {
       console.log(e.target); 
});

#square {
  width: 200px;
  height: 200px;
  display: block;
  border: 1px solid black;
}

<script src="https://unpkg.com/rxjs@6.3.2/bundles/rxjs.umd.min.js"></script>
<div id="square"></div>

我不明白的是，如果用户从方 block 移动到外部(即，当用户将光标放在方 block 内时，仅处理逻辑)，如何跳过console.log正方形)。

编辑:我设法做到了，但这不是“RxJs”方式。现在，我将 isCursorOverSquare 变量设置为 true 和 false，然后使用 filter 运算符。有没有一种“更好”、更具 react 性的方式来处理这个问题？

Answer 1

所以，如果我正确理解你的问题，你想要:

• 跟踪所有鼠标移动(mousemove 事件流 - fromevent )
• 运动停止一段时间后 ( debounce )
• 验证其位于边界框内 ( filter )

因此，根据性能，您可以始终事件化鼠标移动，也可以仅在使用.switchMap()进入方 block 后启动鼠标移动事件化。运算符:

enter$
  .switchMap(_ => $moves
    .debounceTime(2000)
    .takeUntil(leave$)
  )
  .subscribe(finalMouseMoveEventInSquare => {});