jquery - выполнить вызов функции после завершения блока кода (содержащего анимацию)

Question

Всегда были проблемы с тем, как это работает, и никогда по-настоящему не знакомы с «правильным» способом сделать это. Это небольшая часть более крупного кода, но применима та же идея. Везде, где вызывается App.updatePerfectScrollbar(psSidebar);, мне нужно убедиться, что он ждет завершения строк над ним. Происходит анимация, и jquery, и css, и App.updatePerfectScrollbar(psSidebar); не должны выполняться до завершения этих анимаций.

Код работает как есть, но не так, как должен, поскольку App.updatePerfectScrollbar(psSidebar); выполняется раньше анимация происходит до ее завершения.

Я знаю, сколько длится каждая анимация, и не более 200 мс, но я знаю, что тайм-аут - это не ответ, так как вы не можете быть уверены, что он закончился. Есть ли способ использовать в этом случае метод типа .done () или .promise ()?

$('#rlogo').on('click', '.rsideleft-toggler', function(e) {
    
    //if large screen view
    if( $('#sidebar-check').is(':visible') ){
        //toggle minimized sidebar
        if( $('body').hasClass('minimized') ) {
            $('body').removeClass('minimized');
            //show open submenus
            App.sidebarHideSubs(false, 200, 0);
            App.updatePerfectScrollbar(psSidebar); //**** only when above it is finished
        } else {
            $('body').addClass('minimized');
            //show open submenus
            App.sidebarHideSubs(true, 200, 0);
            App.updatePerfectScrollbar(psSidebar); //**** only when above it is finished            
        }
    }
    //mobile view so the button needs to show sidebar and wait for click to go to page or close it
    else {
        //toggle mobileshow sidebar
        if( $('body').hasClass('mobileshow') ) {
            //close it
            $('body').removeClass('mobileshow');
            //close open submenus
            if( $('body').hasClass('minimized') ) {
                App.sidebarHideSubs(true, 0, 200);
            }
            App.updatePerfectScrollbar(psSidebar); //**** only when above it is finished
        } else {
            //show it
            $('body').addClass('mobileshow');
            //show open submenus
            App.sidebarHideSubs(false, 0, 0);
            App.updatePerfectScrollbar(psSidebar); //**** only when above it is finished
        }
    }
});

Answer 1

Чтобы определить, завершена ли css анимация, можно использовать событие animationend

var x = document.getElementById("myAnimatedElement");

// For Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", cssAnimationEnd);

// Standard syntax
x.addEventListener("animationend", cssAnimationEnd);

// In Jquery 
$("#myAnimatedElement").on('animationend webkitAnimationEnd',cssAnimationEnd)

Jquery анимации принимают функцию обратного вызова для той же цели

$('#myAnimatedElement').animate(
     { opacity: .5,
       height: "50%"
     },
     400, function() {
       // Animation complete.
  });

Вы можете использовать эти методы одновременно, чтобы определить, завершены ли обе анимации CSS и Jquery.

 $("#myAnimatedElement").on('animationend webkitAnimationEnd',cssAnimationEnd)
 $('#myAnimatedElement').animate(
       { opacity: .5,
         height: "50%"
       },
       400, jQueryAnimationEnd);

 let cssAnimationFinished = false, jQueryAnimationFinished = false;
 
 function cssAnimationEnd(){
    cssAnimationFinished = true;
    if( jQueryAnimationFinished  ){
       // Do work work here ( Call any callback function )
    }
 }
 function jQueryAnimationEnd(){
   jQueryAnimationFinished = true;
    if( cssAnimationFinished ){
       // Do work work here ( Call any callback function )
    }
 }

Вы можете включить logi c в функцию App.sidebarHideSubs и передать App.updatePerfectScrollbar(psSidebar) как обратный звонок

 App.sidebarHideSubs(true, 0, 200, App.updatePerfectScrollbar(psSidebar));

Answer 2

Вы можете использовать jQuery promise () , чтобы выполнить задачу после анимации.