jquery - 如何使这些函数仅在先前在 jQuery 中完成时才运行？

Question

我有一个悬停事件，在悬停时，我需要设置子导航的大小，根据它的宽度添加一个类，然后显示子导航。问题是，就像现在一样，它在第一次悬停时显示子导航具有原始大小，然后当我第二次悬停时，它已经调整了子导航的大小。

那么我如何在前一个完成后才链接 3 件事情来运行：

1. setSubNavWidth2()
2. setSubMenuPos()

3. $(this).children('.sub-menu-div').css('visibility', 'visible');

    $('.dir').hover(        
           function(){
             if($(this).children('.sub-menu-div').length>0){
                var subnav=$(this).children('.sub-menu-div');
                setSubMenuPos(subnav);
                setSubNavWidth2(subnav);
                  $(this).children('.sub-menu-div').css('visibility', 'visible');
             }              
               $(this).children('.top-level-link').addClass('hoverstyle');              
           },
         function(){
                $(this).children('.sub-menu-div').css('visibility', 'hidden');
                $(this).css('background-color','transparent')
                $(this).children('.top-level-link').removeClass('hoverstyle');
   
           }
       );      
   
   function setSubNavWidth2(element){
        var sub_nav_width = various calculations that set sub nav width
          $(element).width(sub_nav_width );
   }
   
    function setSubMenuPos(element){
          //set posiiton of menu
               var position = $(element).parent().position();
               var xPos = position.left;
               var width = $(element).width();
               var parentWidth = $(element).parent().width();
               var newXpos = xPos + parentWidth;
               if(xPos + width > 950 ){                
                     $(element).removeClass('left');
                      $(element).addClass('right');
               }
   
   
       }