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');
               }
   
   
       }