Как разные браузеры обрабатывают огромное количество одинаковых событий? - PullRequest
0 голосов
/ 08 ноября 2018

Я пытаюсь сделать Drag'n'Drop с подсветкой места, куда будет брошен предмет. Когда происходит событие onDragOver, я выполняю некоторые вычисления, поэтому в основном эти вычисления выполняются каждый раз, когда пользователь перемещает указатель мыши, поскольку место отбрасывания также зависит от относительного положения указателя на элемент, над которым перетаскивается указатель.

Вопрос в том, что происходит, когда вызывается следующий onDragOver, но предыдущий все еще вычисляет вещи?

Вот пример моей проблемы https://stackblitz.com/edit/angular-njenrg

По сути, я устанавливаю класс для элемента, поверх которого перетаскивается другой элемент, и на dragLeave я удаляю класс. Я моделирую некоторые дорогостоящие вычисления, выполняя это:

const arr = [];
for (let i = 0; i < 100000; i++) {
  arr.push(Math.pow(Math.random() * 100 + 1,100)); 
}

Попробуйте переместить элементы один над другими на некоторое время, и вы заметите, что когда вы уроните элемент, вы все равно увидите, что у некоторых элементов есть красная рамка. Это означает, что dragLeave не был выполнен для этих элементов.

Я хочу спросить вас, есть ли способ отменить предыдущий расчет, если начнется новый, поэтому dragLeave будет выполнен вовремя?

...