Как вызвать функцию после выполнения функции щелчка

Question

Я использую событие click для выполнения некоторого кода. И после выполнения кода функции щелчка, хотите выполнить другую функцию или код, такой как функция обратного вызова. Но есть структура для вызова функции после функции щелчка.

var $body = jQuery('body');

$body.on('click', '.modal_popup_btn', function() {
    var $data_type = jQuery(this).attr('data-popup-link');

    jQuery('.modal_wrapper[data-popup="'+ $data_type +'"]').removeClass('modal_closed').addClass('modal_opened');
    jQuery('.modal_wrapper[data-popup="'+ $data_type +'"]').find('.modal_container').removeClass('modal_container_closed').addClass('modal_container_opened');
    setTimeout(function() {
      hiddenBodyScrollWithPadding();
    }, 550);
  });

Вот код, который нужно вызвать hiddenBodyScrollWithPadding () после выполнения кода клика. Здесь используется setTimeout для выполнения перед кодом. Но setTimeout - плохая идея в этой ситуации. У кого-нибудь может быть другая идея выполнить эту функцию лучше?

Answer 1

Если ваша анимация '.modal_wrapper' добавляется, добавьте этот код jQuery. Ваш модал Popup будет прослушивать событие transition, а затем проверьте, имеет ли модал класс .modal_opened. Если переход завершен и условие hasClass выполнено, то ваша пользовательская функция будет выполнена.

jQuery('.modal_wrapper').on('transitionend', function(event) {
    event.preventDefault();
    if(jQuery(this).hasClass('modal_opened')){
        hiddenBodyScrollWithPadding();
    }
});