仅在鼠标移动速度较低时才需要过滤mousemove事件

Question

如果用户通过可观察到的mousemove事件非常快速地拖动，则仅当他试图在放置元素之前瞄准时，我们才需要发射每个px（我们可以抓住这一刻鼠标的bcs速度会很低） ，对此有什么窍门吗？

mb在某些情况下可以通过px /秒获得速度，然后进行过滤或其他操作...

Answer 1

您可以对鼠标位置进行pairwise比较，测量事件之间的距离并过滤掉高速移动：

const { fromEvent } = rxjs;
const { pairwise, map, filter } = rxjs.operators;

const block = document.getElementById('block');
const mousemove$ = fromEvent(block, 'mousemove');

mousemove$.pipe(
  // filter out high velocity movements
  pairwise(),
  map(([a, b]) => ({
    d: getDistance(a,b),
    x: b.x,
    y: b.y
  })),
  filter(e => e.d < 10)
).subscribe(e => {
  console.log(e.x, e.y);
});

function getDistance(a, b){
  return Math.sqrt(
    Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2)
  );
}

<script src="https://unpkg.com/rxjs@6.4.0/bundles/rxjs.umd.min.js"></script>
<style>
  #block {
    margin: 3rem;
    padding: 6rem;
    background: rebeccapurple;
  }
</style>

<div id="block"></div>

这取决于浏览器发出和处理这些事件的速率。

因此，您可能需要添加timeInterval来计算速度，而不仅仅是增量。

-

OR ，您可以使用debounceTime, throttleTime, auditTime or sampleTime来实现。

这里有一个使用sampleTime 300ms的示例，我建议：

const { fromEvent } = rxjs;
const { sampleTime } = rxjs.operators;

const block = document.getElementById('block');
const mousemove$ = fromEvent(block, 'mousemove');

mousemove$.pipe(
  // sample only once per 300ms
  sampleTime(300)
).subscribe(e => {
  console.log(e.x, e.y);
});

<script src="https://unpkg.com/rxjs@6.4.0/bundles/rxjs.umd.min.js"></script>
<style>
  #block {
    margin: 3rem;
    padding: 6rem;
    background: rebeccapurple;
  }
</style>

<div id="block"></div>

当然，您还可以将“增量移动”测量与“采样”结合起来

希望这会有所帮助