我尝试在1秒后调用.hide()(使用setTimeout),但它直接执行,为什么?

时间:2013-10-17 09:24:36

标签: javascript jquery settimeout

我尝试在1秒后鼠标输出(.hover()中的第二个函数)时隐藏子导航,并且我使用setTimeout。我需要在setTimeout的内部函数中使用this变量,所以我尝试这样:

jQuery(".topnav > ul > li").hover(function() {
        jQuery("ul.topnavsub").hide();
        jQuery(this).find("ul.topnavsub").show();
    }, function() {
        var t = setTimeout((function(that){jQuery(that).find("ul.topnavsub").hide(); console.log(that);})(this), 1000);
    });

这有效,但没有延迟。 1.为什么没有1000milisec deplay和2.我怎么做才能正常工作?

如果我开始工作,我想补充一点:当在1000milisec中输入subnav时,setTimeout会停止,这样导航就不会被隐藏。这就是我所拥有的,但我无法测试它导致孔setTimeout-thing不起作用:

jQuery(".topnav > nav > ul > li").hover(function() {
    jQuery("ul.topnavsub").off();
    jQuery("ul.topnavsub").hide();
    jQuery(this).find("ul.topnavsub").show();
}, function() {
    var t = setTimeout((function(that){jQuery(that).find("ul.topnavsub").hide(); console.log(that);})(this), 1000);
    jQuery(this).find("ul.topnavsub").on("mouseenter", function() {
        clearTimeout(t);
        jQuery(this).off();
    });
});

3 个答案:

答案 0 :(得分:0)

令人费解的方式:

var t = setTimeout((function(that){ return function(){
    jQuery(that).find("ul.topnavsub").hide();
    console.log(that);
  }
})(this), 1000);

不那么酷但仍然有效 - ( - 并且可能更具可读性)方式:

var that = this;
var t = setTimeout(function(){ 
    jQuery(that).find("ul.topnavsub").hide();
    console.log(that);
}, 1000);

答案 1 :(得分:0)

匿名函数正在自行执行。

var t = setTimeout((function(that){
        jQuery(that).find("ul.topnavsub").hide(); 
        console.log(that);
    })(this),  //(this) is self executing
    1000);
});

替代:

var that = this;
var t = setTimeout(function(){
        jQuery(that).find("ul.topnavsub").hide(); 
        console.log(that);
    },1000);

答案 2 :(得分:0)

这是因为您执行了一个函数并将undefined传递给setTimeout

var t = setTimeout((function(that){
   jQuery(that).find("ul.topnavsub").hide();
   console.log(that);
})(this), 1000);

只需从函数末尾删除(this)

var self = this;
var t = setTimeout(function(){
   jQuery(self).find("ul.topnavsub").hide();
   console.log(self);
}, 1000);