Wie kann ich Funktion in JS laden, bevor ich es das erste Mal rufe?

Question

Ich erstelle ein Megamenu und es funktioniert gut, bis ich versuche, das slideDown zu verzögern. Ich benutze jQuery. Der Code für slideUp und slidedown ist wie folgt:

$(document).ready(function(){ 
    $(".dropdown").hover(   
     function() { 
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).delay(500).slideDown("fast"); 
      $(this).toggleClass('open');   
     }, 
     function() { 
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("fast"); 
      $(this).toggleClass('open');  
     } 
    ); 
}); 

Wenn ich die Seite aktualisieren und schweben über dem „.dropdown“ Element es ohne Verzögerung nach unten gleitet. Wenn ich jedoch wieder darüber schwebe, verzögert es sich ganz gut, als ob ich es anriefe, wenn ich das erste Mal über ihm schwebte.
Gleiches gilt für jede Menüschaltfläche (machen Sie jedes ".dropdown" -Element separat).
Ich dachte, dass Fehler in $ (Dokument) .ready() liegt, also wartete ich auf die ganze Seite geladen, aber das half nicht.
Haben Sie Vorschläge, was ich falsch mache?

Lassen Sie mich Ihnen ein Fragment meiner Speisekarte zeigen. Es verwendet auch Bootstrap.

<ul class="nav navbar-nav"> 
      <li class="dropdown mega-dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">OLEJE </a>      
        <ul class="dropdown-menu mega-dropdown-menu"> 
         <li class="col-sm-3"> 
           <ul> 
            <li class="dropdown-header" style="color:#F96211">Syntetyczne</li> 
            <li class="divider"></li> 
            <li><a href="#">Oleje silnikowe 0W30</a></li> 
            <li><a href="#">Oleje silnikowe 0W40</a></li> 
           </ul> 
         </li> 
        </ul>      
      </li> 
</ul> 

Ich habe es abgestreift, so dass es nur das Grundgerüst zeigt.

Answer 1

Ich glaube nicht, dass es DOM-Ready-Fehler ist.
Ohne viel ins Detail zu gehen (da ich nicht den Code testen) ist hier, wie ich das oben

jQuery(function($){ // DOM ready. $ alias secured. 

    $(".dropdown").hover(function(evt) { 

     var mEnt = evt.type==="mouseenter"; 
     $(this).toggleClass('open') 
       .find('.dropdown-menu') 
       .not('.in') // without seeing your HTML I'm not sure about this line 
       .stop() 
       .delay(mEnt?500:0) 
       .slideToggle("fast"); 

    });   

});