帶條件的 RxJs mousemove 事件
[英]RxJs mousemove event with condition
問題描述
我正在為此苦苦掙扎，我不知道如何繼續。 我只想在用戶停止使用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>
我無法弄清楚的是，如何跳過console.log ，如果用戶從正方形移動到外部（即僅處理邏輯，當用戶在正方形內使用光標時）。
編輯：我設法解決了它，但這不是“RxJs”方式。 現在我將isCursorOverSquare變量設置為true和false ，然后使用filter運算符。 有沒有一種“更好”的反應性更強的方法來處理這個問題？
2 個解決方案
解決方案1
2 已采納 2018-09-26 07:58:43
因此，如果我正確理解您的問題，您想：
因此，根據性能，您可以始終事件 mousemove 或僅在使用.switchMap()運算符進入方塊后才啟動 mousemove 事件：
enter$
.switchMap(_ => $moves
.debounceTime(2000)
.takeUntil(leave$)
)
.subscribe(finalMouseMoveEventInSquare => {});
解決方案2
0 2018-09-26 08:14:54
您遇到的問題是最后一個mousemove事件在光標仍在方塊中時被觸發，但是去抖動將可觀察對象延遲到光標離開方塊之后。 您可以通過僅獲取可觀察對象直到鼠標離開正方形來解決此問題。 這是此答案的完整 代碼：
<head>
<style>
#square {
width: 200px;
height: 200px;
display: block;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="square"></div>
<script src="https://unpkg.com/rxjs@6.3.2/bundles/rxjs.umd.min.js"></script>
<script>
const { fromEvent } = rxjs;
const { debounceTime, repeat , takeUntil } = rxjs.operators;
const square = document.getElementById("square");
const move$ = fromEvent(square, "mousemove").pipe(debounceTime(2000));
const enter$ = fromEvent(square, "mouseenter");
const leave$ = fromEvent(square, "mouseleave");
move$.pipe(takeUntil(leave$), repeat()).subscribe((e) => console.log(e.target));
</script>
</body>
repeat操作符是必要的，否則一旦鼠標第一次離開方塊，當鼠標下一次進入方塊時，observable 將不會重復。 如果您的預期行為是讓 observable 在鼠標第一次離開方塊后停止發射，請隨意刪除重復操作符。 希望能幫到你，有什么問題可以私信我！
切換mousemove mousestop事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.