javascript - 使用 javascript 清除超时

Question

我有某种变量超出范围问题或其他东西。在下面的函数中，我根据鼠标是进入还是退出来创建或清除超时。不过，似乎即使创建了超时，它在重新进入时也会返回 undefined 。不知道我在这里做错了什么，感谢您的帮助！

jsFiddle 示例

JavaScript：（具体问题else在第 35 行的条件范围内

var navLinks = $('nav li.sub');

navLinks.mouseenter(function(){

  console.log('hovering on link');

  var thiis   = $(this),
      subList = thiis.find('ul'),
      autoClose;

  if (!thiis.hasClass('out')){

    console.log('isnt out');

    /* Link */

    thiis

    /* Show submenu when entering link */

    .addClass('out')

    /* Hide submenu when exiting link */

    .mouseleave(function(){

      autoClose = setTimeout(function(){

        thiis.removeClass('out');
      }, 1000);


      console.log('exiting link: timeout active', autoClose);
    });
  } else {

    console.log ('is out', autoClose);

    if (autoClose){

      console.log('is out: clear timeout');

      clearTimeout(autoClose);
    }
  }
});

Answer 1

您应该使用全局对象来存储一些变量，例如超时和间隔的引用。例如，您可以声明这样一个对象：

// Declare the context object in the global scope
var myContext = {
    "myTimeout" : false
}

然后在 mouseenter 和 mouseleave 处理函数中使用上下文对象。

Answer 2

正如评论中指出的那样，每次鼠标悬停一个项目时，您都会有新的超时。让我们为每个项目创建新的超时变量：

$('nav li:has(ul)').each(function(){
  var par = $(this),
      sub = $("> ul", this),
      closeTO;

  par.hover(
    function(){
      clearTimeout(closeTO);
      par.addClass("out");
    },
    function(){
      closeTO = setTimeout(function(){
        par.removeClass("out");        
      }, 1000);
    }
  );
});

http://jsfiddle.net/ByuG3/1/

Answer 3

技术，

简单的答案就是转移var autoClose到外部范围，但我认为您可以（并且应该）做更多。

进一步来说，

• 我认为您不想将处理程序附加到mouseleave处理程序中mouseenter。它可以从一开始就永久连接。
• 在mouseenter处理程序中，clearTimeout(autoClose)并且thiis.addClass('out')可以无条件执行。测试没有真正的经济意义.hasclass('out')。

尝试这个 ：

var navLinks = $('nav li.sub');
var autoClose;
navLinks.hover(function(){
    var thiis = $(this);
    clearTimeout(autoClose);
    thiis.addClass('out');
}, function(){
    var thiis = $(this);
    autoClose = setTimeout(function(){
        thiis.removeClass('out');
    }, 1000);
});