如何在打開下拉菜單時設置1秒延遲？

Question

我一直在線上閱讀的東西一段時間，還沒有想出使用setTimeout函數的正確方法..任何理由爲什麼？

JSFIDDLE

$('.drop-down').click(function() { 
 
    $(this).hide(); 
 
}); 
 
$('.nav-main li ul').hide().removeClass('.drop-down'); 
 
setTimeout(function() { 
 
$('.nav-main li').hover(
 
    function openDrop() { 
 
    $('ul', this).stop().slideDown(1000); 
 
    }, 
 
    function closeDrop() { 
 
    $('ul', this).stop().slideUp(1000); 
 
    } 
 
);}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="nav-main" role="navigation"> 
 
    <ul> 
 
    <li class="nav-top"><a href="#welcome">Welcome</a></li> 
 
    <li class="nav-top"><a href="#about">About</a> 
 
\t \t <ul class="drop-down"> 
 
\t \t \t <li><a href="#about">Services</a></li> 
 
\t \t \t <li><a href="#client">Clients</a></li> 
 
\t \t \t <li><a href="#press">Press</a></li> 
 
\t \t \t <li><a href="#leadership">Leadership</a></li> 
 
\t \t \t <li><a href="#twitter">Twitter</a></li> 
 
\t \t </ul> 
 
\t </li> 
 
\t <li class="nav-top"><a href="#contact">Contact</a> </li> 
 
    </ul> 
 
\t \t \t \t \t \t 
 
</nav>

Answer 1

您可以使用jQuery的延遲（）方法，在這種情況下，沒有必要的setTimeout

$('ul', this).stop().delay(1000).slideDown(1000); 

見更新小提琴：https://jsfiddle.net/8xtxxk35/3/

Answer 2

正如@Tim所說的，在這個例子中你不需要使用setTimeout。

但是，僅僅回答爲什麼它不工作...

如果被使用它（你真的不需要在這種情況下），它不工作的原因是因爲您的setTimeout的位置：

setTimeout(function() { 
    $('.nav-main li').hover(
    function openDrop() { 
     $('ul', this).stop().slideDown(1000); 
    }, 
    function closeDrop() { 
     $('ul', this).stop().slideUp(1000); 
    } 
    ); 
}, 1000); 

在這裏，你實際上並不做除了拖延被添加到頁面的hover處理任何事情。

你需要用你真的想用setTimeout的運行代碼：

$('.nav-main li').hover(
    function openDrop() { 
     setTimeout(function() { 
      $('ul', this).stop().slideDown(1000); 
     }, 1000); 
    }, 
    function closeDrop() { 
     setTimeout(function() { 
      $('ul', this).stop().slideUp(1000); 
     }, 1000); 
    } 
    ); 

注有2和一個定時器，現在，每一個功能。