代码之家 › 专栏 › 技术社区 › Runtime Terror

用RXJS控制鼠标移动停止

rxjs events

Runtime Terror · 技术社区 · 6 年前

有没有一种方法可以确定用户何时停止移动鼠标?我不知道如何在RXJS中判断用户是否停下来,比如说2s。

当我这样使用它时:

fromEvent(document, 'mousemove').pipe(
    debounceTime(2000)
).subscribe(() => console.log("Stoped"));

即使我把光标移出屏幕,它也会触发。

1 回复 | 直到 6 年前

Oles Savluk 6 年前

视情况而定,但 timeout 或 timeoutWith 可能会为你工作。

此示例将发出 "stop" 每次没有的时候 mousemove 超过1秒的事件:

const { of, defer, concat, fromEvent } = rxjs;
const { mapTo, timeoutWith, skipUntil } = rxjs.operators;

const move$ = fromEvent(document, 'mousemove').pipe(mapTo('move'));
const moveAndStop$ = move$.pipe(
  timeoutWith(
    1000, 
    defer(() => concat(
      of('stop'), 
      moveAndStop$.pipe(skipUntil(move$))
    ))
  )
);

moveAndStop$
  .subscribe(e => console.log(e));

<script src="https://unpkg.com/rxjs@6.3.2/bundles/rxjs.umd.min.js"></script>
<div id="app">Move your mouse over me</div>

推荐文章

Pikachu620 · 可以对事件列表进行排序吗?

2 年前

Daavee18 · 节点。未设置“数据”侦听器时,js http模块未关闭连接

2 年前

Ahsan Sajid · 我试图解决以下挑战,但在ADDEVENTLISTNER中仍停留在函数调用上。帮助我

2 年前

makerbaker · 取消选中框Javascript后重置输入值?

2 年前

sam_rox · 在Matlab ODE中使用事件内部的两个条件

7 年前

Santosh · javafx中的按键事件

7 年前

KarLito · 删除或切换Highcharts上的事件

7 年前

JWoods4 · 读取击键并放入文本框

7 年前

user7171623 · 具有匿名函数的事件侦听器(typeError,toggle undefined)

7 年前

Everett Kaser · 在事件处理程序中绘制到NSView

7 年前