点击函数执行后如何调用函数

时间:2019-10-11 06:13:55

标签: javascript jquery html

我正在使用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对于这种情况不是一个好主意。谁能以更好的方式执行此功能?

1 个答案:

答案 0 :(得分:0)

如果您的'.modal_wrapper'动画,请添加此jQuery代码。您的弹出模式将监听transition事件结束,然后检查Modal是否具有.modal_opened类。如果转换已经结束并且hasClass条件为true,那么将执行您的自定义函数。

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