Как настроить throttle/debounce в этом случае?

Question

[hckn]

Сделал пример - https://codesandbox.io/s/r551o8q45m

Троттл/дебанс я использую чтобы сделать UX более приятным. Например: если юзер просто случайно проводит мышкой над ссылкой я не хочу ему сразу показывать попап, только если он задержится над ссылкой (как в Википедии на ссылках окна). И при удалении мышки я не хочу сразу мгновенно убирать окно, а полсекунды его еще показывать.

По каждой отдельной ссылке все работает ОК.

Проблема возникает в таком сценарии: если навести мышку на ссылку 111 >> дождатся попап >> быстро перевести мышку на ссылку 222 >> дождатся попап >> резко перевести на ссылку 333 >> дождатся попап, то после при отведении мышки закрывается только последний попап!

Перепробовал все варианты throttle/debounce, leading/trailing, пробовал вешать дополнительно флаг на mouseover, нифига не работает. То одно ломается, то другое.

Как решить?

Answer 1

[0xD34F]

Проблема в том, что метод popup - он у вас один на все экземпляры компонента. Отсюда и невозможность закрытия попапов сразу после открытия - метод просто не вызывается, таймаут ещё не окончился.

Чтобы работало так, как вы хотите, popup в каждом отдельном экземпляре должен быть уникальной функцией, т.е. в methods ему не место:

created() {
  this.popup = _.throttle(function(state) {
    this.show = ({
      enter: true,
      leave: false,
    })[state];
  }, 500, {
    leading: false,
    trailing: true,
  });
},

Ну и как-то громоздко выглядит. Может ну их, эти enter/leave:

this.popup = _.throttle(show => this.show = !!show, 500, {
  leading: false,
  trailing: true,
});

<a href="#" @mouseenter="popup(1)" @mouseleave="popup(0)">

??

Comments

[hckn]

Честно говоря, я думал Вью разделяет этот метод, ведь экземпляры компонента независимы?

А касательно вашего решения. ВАУ. Я такого еще не видел и понятия не имел что так вообще можно.
Если не трудно, что значит эта конструкция?

this.show = ({
        enter: true,
        leave: false
      })[state]

[0xD34F]

Честно говоря, я думал Вью разделяет этот метод, ведь экземпляры компонента независимы?

Неудачно выразился, "один на все экземпляры" - это, конечно же, не про сам popup, имелась в виду функция, которая передаётся в throttle.

что значит эта конструкция?

Смысл тот же, что и у первоначального варианта (ну, почти - если закрыть глаза на то, что state может оказаться равным чему-то кроме enter и leave). Вместо условных операторов здесь чтение свойства объекта. Конечно, тут объём кода небольшой, но в случае, когда количество вариантов велико, преимущества подобной записи становятся более очевидными - наверняка вы видели цепочки if else if else if ... else или операторы switch со множеством case, а сами действия элементарные, например как у вас - присваивание значения. Многовато логики для столь тривиальной операции - поэтому можно сделать объект или массив, куда будут записаны все возможные варианты выбора, а сам выбор будет осуществлять простым индексированием.

Для лучшего понимания можно рассмотреть такой пример (более очевидный, но суть та же): пусть у вас есть номер месяца, и вы хотите получить его название. Как это будет выглядеть с использованием условных операторов или switch? Понятно как:

if (month === 1) {
  return 'январь'
} else if (month === 2) {
  return 'февраль'
} else ...

или

switch (month) {
  case 1: return 'январь'
  case 2: return 'февраль'
  ...
}

Слишком многословно, а ведь можно занести все варианты в подходящую структуру данных:

months = ['январь', 'февраль', ...]

И тогда получение нужного значения упроститься до одной строки:

months[month - 1]

[hckn]

0xD34F, все понятно. У вас преподавательский талант. Спасибо!