2

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

我需要在 X 秒后自动隐藏标题而不进行交互，所以我创建了两个函数，startMenuTimeout并且clearMenuTimeout()，我的这部分代码如下所示：

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

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

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

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

4

1 回答 1

0

在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);
}

单击此处访问更新的笔。

于 2017-08-14T17:19:31.150 回答