javascript - 使用 javascript 清除超时

Question

我遇到了某种变量超出范围的问题或其他问题。在下面的函数中，我根据鼠标是否进入或退出来创建或清除超时。看来，即使一旦创建了超时，它在重新进入时也会返回未定义。不确定我在这里做错了什么，感谢您的帮助!

jsFiddle example

JavaScript:(特定问题在第 35 行的 else 条件中

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

技术，

简单的答案是将 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);
});