我想添加延迟到我的JavaScript函数，但不知道如何

我正在使用一个菜单和一个多子菜单。当您将鼠标悬停在菜单项上时，应该出现子菜单，当您将鼠标移开时，它应该消失。虽然这工作，我希望鼠标功能有一个延迟，我已经尝试了多种方法，但我似乎无法让它工作。我想添加延迟到我的JavaScript函数，但不知道如何

请注意：我使用mouseout函数而不是fadeToggle的原因是因为我有多个项目可以进行悬停。所以，如果我将鼠标从menhuitem-1移动到menuitem-2，我希望那个人出现在它上面，反之亦然。

这是我的代码（它的工作原理，但我想鼠标移开时的延迟）：

$(function(){ 
$("#menuitem-1").hover(function(e){ 
    $("#subitem-1").stop().toggle().css('z-index', '1000'); 
}); 
}); 
$(function(){ 
$("#menuitem-1").mouseout(function(e){ 
    $("#subitem-1").stop().css('z-index', '1'); 
}); 
});

来源

2014-11-03 TJP

您是否尝试过包装在一个setTimeout的鼠标移开的电话： http://www.w3schools.com/jsref/ met_win_settimeout.asp – ewein 2014-11-03 16:52:46

'hover'意思是'mouseenter'和'mouseleave'，所以你有矛盾的处理程序。另外，'mouseout'也会触发后代，因此您应该使用'mouseleave'。另外，多个'$（function（）{...}）处理程序绝对没有理由。把所有的代码放在一个。最后，你可以使用'setTimeout'来延迟代码。很多关于这方面的信息。 – 2014-11-03 16:52:52

...从你的ID的外观来看，你可能会一遍又一遍地重复几乎相同的代码。如果是这样，请访问http://codereview.stackexchange.com/以获取重构帮助。 – 2014-11-03 16:56:02

也许尝试这样的事：

$(function(){ 
    var elem = $("#subitem-1"); 
    var menuitem = $("#menuitem-1"); 
    var timeout; 
    menuitem.hover(function(e){ 
     clearTimeout(timeout); 
     elem.stop().toggle().css('z-index', '1000'); 
    }); 

    menuitem.mouseout(function(e){ 
     timeout = setTimeout(function(){ 
      elem.stop().css('z-index', '1'); 
     }, 3000); 
    }); 
});

来源

2014-11-03 16:53:56 ewein

当您将鼠标悬停在项目上时，您必须取消超时。 – Halcyon 2014-11-03 17:04:22

尝试是这样的：

$(function(){ 
$("#menuitem-1").hover(function(e){ 
    $("#subitem-1").stop().toggle().css('z-index', '1000'); 
}); 

$("#menuitem-1").mouseout(function(e){ 
     setTimeout(function(){ 
     $("#subitem-1").stop().css('z-index', '1'); 
     }, 1000); 
}); 
});

欲了解更多信息：Javascript timing events

来源

2014-11-03 16:56:03 Aliweb

当您将鼠标悬停在项目上时，您必须取消超时。 – Halcyon 2014-11-03 17:06:01

var delay=1000, setTimeoutConst; 
$("#menuitem-1").hover(function(e){ 
     setTimeoutConst = setTimeout(function(){ 
      //do something 
     }, delay); 
function(){ 
    clearTimeout(setTimeoutConst); 
    });

希望这会帮助你。

来源

2014-11-03 16:56:09

当您将鼠标悬停在上方时，取消计时器很重要，否则无论您是否将鼠标悬停在上方，项目或项目都会隐藏。

使用定时器：

function create_timer(callback, timeout) { 
    var timer = null; 
    return { 
     start: function() { 
      timer = setTimeout(function() { 
       timer = null; 
       callback(); 
      }, timeout); 
     }, 
     cancel: function() { 
      if (timer !== null) { 
       clearTimeout(timer); 
       timer = null; 
      } 
     } 
    }; 
}

现在你可以这样做：

$(function(){ 
    var timer = create_timer(500, function() { 
     $("#subitem-1").stop().css('z-index', '1'); 
    }); 
    $("#menuitem-1").mouseover(function(e){ 
     $("#subitem-1").stop().toggle().css('z-index', '1000'); 
     timer.cancel(); 
    }); 
    $("#menuitem-1").mouseout(function(e){ 
     timer.start(); 
    }); 
});

来源

2014-11-03 16:59:12 Halcyon

我想添加延迟到我的JavaScript函数，但不知道如何

回答

相关问题