jquery - clearTimeout(var) 未按预期工作

Question

首先:我进行了搜索，所有有关clearTimeout不起作用的问题都是关于变量范围问题，而不是我的情况。

我需要在 X 秒后自动隐藏标题而无需交互，因此我创建了两个函数，startMenuTimeout 和 clearMenuTimeout()，这部分代码看起来像那:

var menuTimeout = null;
function startMenuTimeout(){
  menuTimeout = setTimeout(function(){
    $('[auto-header]').removeClass('-visible');
  }, 2000);
}
function clearMenuTimeout(){
  clearTimeout(menuTimeout);
}

当用户向上滚动时，我使标题可见并开始超时，然后在 mouseenter 上清除超时。

问题是，有时它不会清除超时，如果你上下滚动几次，2秒超时后，菜单就会上升。

我在codepen上重现了这个问题，点击here访问。

Answer 1

在 Kevin B 和 Carcigenicate 的快速评论后，我解决了它。事实是，每次调用 setTimeout() 时，它都会创建一个新 ID，因此，如果您将超时 ID 归因于变量，它将覆盖，从而丢失对前一个 ID 的引用。

解决方案是在设置新超时之前清除超时，以便一次只有一个超时处于事件状态。

代码现在看起来像这样:

var menuTimeout = null;
function startMenuTimeout(){
  clearTimeout(menuTimeout);
  menuTimeout = setTimeout(function(){
    $('[auto-header]').removeClass('-visible');
  }, 2000);
}
function clearMenuTimeout(){
  clearTimeout(menuTimeout);
}

Click here访问更新的笔。