clearTimeout(var) 没有按预期工作答案

【问题标题】：clearTimeout(var) not working as expectedclearTimeout(var) 没有按预期工作
【发布时间】：2018-01-22 13:51:23
【问题描述】：

首先：我进行了搜索，所有关于 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访问。

【问题讨论】：

您可能开始了很多超时。当您使用上述代码创建第二个时，第一个无法停止，因为您丢失了 id。
哦，我明白了，在这种情况下，有没有办法用相同的 ID 创建新的超时，覆盖最后一个？
@BrunoVaz 这就是超时返回的内容。
是的，每次调用 setTimeout 都会返回一个新 ID。
@BrunoVaz JSRun。没有窗口或文档对象，但由于它有一个控制台，因此非常适合快速测试代码。我在 Android 上。

标签： jquery cleartimeout

【解决方案1】：

在 Kevin B 和 Carcigenicate 的超快 cmets 之后，我解决了它。问题是，每次调用 setTimeout() 时，它都会创建一个新 ID，然后，如果您将超时 ID 归因于变量，它将覆盖，失去对前一个的引用。

解决方案是在设置新超时之前清除超时，这样一次只能激活一个超时。

现在的代码如下所示：

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

Click here 访问更新的笔。

【讨论】：