Меню с задержкой подменю Просмотр в React

Question

Я пытаюсь реализовать Меню с поведением, аналогичным этому https://www.ocado.com/browse/fresh-20002

а именно с задержкой просмотра подкатегорий при наведении и задержкой размывания подкатышей при отпускании мыши Сейчас я сделал что-то подобное для удаления subcat -> onMouseLeave

removeChildren() {
setTimeout(
  function() {
    this.setState({ selected: [] });
  }.bind(this),
  700
);    

}

и вот так для отображения subCats -> onMouseEnter

getChildren(category) {
let { selected } = this.state;
selected = [].concat(category);
setTimeout(
  function() {
    this.setState({ selected });
  }.bind(this),
  700
);

}

Но это вызывает проблему - мигающее меню, когда я начинаю перемещаться быстрее по меню в этом конкретном меню Ocado, оно просто ждет некоторое время и показывает / удаляет субкадр, но оно не меняется, когда я двигаюсь слишком быстро.

Answer 1

Что вам нужно, так это отложенная обработка события. Когда пользователь очень быстро перемещает мышь и запускает серию событий MouseLeave / MouseEnter, ваше приложение должно отложить обработку обновления state, то есть запускать обновления пользовательского интерфейса, до тех пор, пока мышь не остановится, скажем, на 700 мс (как в вашем коде). Только тогда должна выполняться последняя функция setState, а пользовательский интерфейс должен отражать последнее зарегистрированное событие.

Вы можете создать новое свойство в вашем компоненте React с именем timer:

timer = null;

Возьмите вашу функцию getChildren в качестве примера. В функции getChildren, которая вызывается при возникновении события MouseEnter:

getChildren(category) {
    let { selected } = this.state;
    selected = [].concat(category);
   // Clear out the current stored event.
    clearTimeout(this.timer)
    // Store this event in `this.timer` and if this is the last one fired in 700ms, the `setState` function will execute and UI will update.
    this.timer = setTimeout(function(){
        this.setState({ selected });
    }.bind(this), 700);
}

MouseLeave и функция removeChildren очень похожа на описанную выше.