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归因于变量，它将覆盖，失去对前一个的引用。

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

现在代码如下：

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

Click here访问更新的笔。

clearTimeout（var）未按预期工作

1 个答案: