Необходимо фильтровать событие mousemove только при низкой скорости перемещения мыши

Question

в случае, когда пользователь очень быстро перетаскивает через наблюдаемое событие mousemove, нам не нужно генерировать каждый пиксель этого события, только когда он пытается прицелиться до выпадающего элемента (мы можем уловить этот момент, поскольку скорость мыши будет низкой) Есть ли какая-нибудь хитрость для этого?

mb в некоторых случаях для получения скорости через пикс / с, затем для фильтрации или т. Д. *

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 для расчета скорости, а не только дельта .

-

ИЛИ Вы можете достичь этого с помощью debounceTime, throttleTime, auditTime или sampleTime .

Вот пример использования sampleTime 300 мс, который я бы порекомендовал:

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>

Конечно , вы также можете комбинировать измерение «дельта-перемещение» с «выборкой»

Надеюсь, это поможет