我想添加延遲到我的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函數，但不知道如何

回答

相關問題