JS滑动面板：防止mouseleave事件延迟

Question

我编写了一个 JS 面板类，在页面的顶部、底部、左侧或右侧边框上显示滑动面板。

当鼠标靠近页面的顶部、底部、左侧或右侧边缘（或默认情况下）时，会显示该面板。

当鼠标离开面板时，面板会隐藏。

请查看我的CodePen：https://codepen.io/Samwise_71/pen/MWRVaJb

您会注意到，有时当鼠标离开面板时，可能需要几秒钟才能开始隐藏动画（在 Firefox 中测试）：

// Hide panel on mouse leave
this.#panel.on("mouseleave", function (e) { panel.hide(e); });

/**
 * Slides the panel out of viewport.
 * @param {event object} e   
 */
hide(e) {
  if (!this.isVisible()) {
    return;
  }

  let ymax = this.#panel.height();
  let xmax = this.#panel.width();

  // Prevent leave to side of panels position
  if (this.#position == UserInterface.Panel.PositionTop && e.offsetY < 0 ||
    this.#position == UserInterface.Panel.PositionBottom && e.offsetY > ymax ||
    this.#position == UserInterface.Panel.PositionLeft && e.offsetX < 0 ||
    this.#position == UserInterface.Panel.PositionRight && e.offsetX > xmax) {
    return;
  }

  let margin = this.getMargin();
  let css = {};
  css[margin.key] = -1 * margin.pixels;
  let panel = this;
  this.#panel.animate(css, this.#speed, function () { panel.isVisible(false); });
}

我不确定是什么导致了这种延迟，它似乎与鼠标移动无关。

我应该如何更改才能在鼠标穿过面板边框后立即启动动画？

Answer 1

问题在于如何执行

show

和

hide

方法。如果您在“show”方法的顶部添加

console.log

，您会注意到每当您将鼠标移到面板上时，它都会执行多次。因此，在所有打开动画完成之前，您的面板不会关闭。

从技术上讲，您不需要检查

isVisible

，然后设置

isVisible.

，您只需停止上一个动画并开始当前有意义的动画即可。这可以通过简单地在

this.#panel.stop();

和

show()

方法之前添加

hide()

来实现。如果这有帮助，请告诉我。