Question

我正在尝试以与此https://www.ocado.com/browse/fresh-20002

类似的行为来实现Menu

，即在悬停时具有延迟的子猫视图，在鼠标离开时具有延迟的子猫模糊现在我做了类似的事情来删除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菜单中的菜单周围快速移动时，菜单闪烁，它只是等待一段时间并显示/删除subcat，但是当我移动得太快时，它并没有改变。

Answer 1

您需要的是延迟处理事件。当用户快速移动鼠标并触发一系列MouseLeave / MouseEnter事件时，您的应用应延迟state更新的处理，即触发UI更新，直到鼠标停止持续700毫秒（如您的代码所示）。只有这样才能执行最后一个setState函数，并且UI应该反映出最后一个注册的事件。

您可以在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功能与上面的功能非常相似。

在React中具有延迟子菜单视图的菜单

1 个答案: