Как ждать в цикле при наведении курсора и не помещать все события в стек вызовов JS / Vue.js

Question

Я выполняю вызов API при каждом наведении мыши, но мне нужно подождать одну секунду и выполнить один вызов API в соответствии с последним наведением мыши.

Пример.Если пользователь наведет указатель мыши на 10 заголовков, вызов API будет выполнен только после того, как его мышь останется включенной на одну секунду.

Вот иллюстрация для иллюстрации (см. Сеть в инспекторе): https://codesandbox.io/s/search-a-la-mano-hpk92

Answer 1

Для этого вы можете использовать lodash.debounce .Он просто позвонит по прошествии времени, которое вы прошли.Он будет выполнять функцию только в параметрах последнего вызова, избегая ненужных вызовов.Вы можете проверить пример здесь .

Вам нужно только обернуть свою функцию с помощью функции debouce

debounce(
  function (param1) { console.log('hello' + param1)},
  500
)

Answer 2

Итак, есть "mouseleave", который срабатывает только тогда, когда пользователь покинул элемент.

myElement.addEventListener("mouseleave", function( event ) {

И объект события предоставляет некоторую информацию о его поведении. С event.relatedTarget вы получите элемент, на котором была мышь.

Не знаю, поможет ли это, но вы можете попробовать