javascript - 完成前一个操作后延迟执行JavaScript函数

在我的页面上，当成功使用使用模态框的表单创建产品时，模态消失了，效果随之消失，然后应该使用新添加的项目“刷新”带有产品列表的页面。

但是，模态的消失效果确实会破坏动画的流程，因为项目列表加载得太早了。

我不想抛出一个随机数延迟。我想执行动画完成后立即加载项目的功能。

我怎样才能做到这一点？

$(document).on('click', '#create-battery', function(event) {
    event.preventDefault();
    $.post('/battery', $('#create-battery-form').serialize(), function(data) {
        if (data['status'] == true) {
            $('#errors').addClass('hidden');
            $('#success').removeClass('hidden');
            $('#success').html(data['message']);
            $('#add-new-battery').modal('hide'); // here is the hide effect
            renderBatteries(); // here is where all the products are loaded again in the list
        } else {
            $('#success').addClass('hidden');
            $('#errors').removeClass('hidden');
            $('#errors').html(data['errors']);
            $('#errors').addClass('top-buffer');
        }
    });
});

编辑

现在，当调用我的renderBatteries()函数时，将渲染项目。但是使用此功能的方式使我的通知消息消失了：

function renderBatteries(url, notice) {
    if (url === undefined || url === null) url = '/battery/all';
    $.get(url, function(data) {
            $('#content').empty();
            $('#content').append(data['view']);
            if (data['empty']) {
                $('#batteries-list').empty();
                $('#content').append('<div class="alert alert-info top-buffer col-md-6 col-md-offset-3 text-center">No batteries found in the database.</div>');
            }
        });
}

我尝试通过添加最后一行来修复它：

if (notice) {
    $('#success').html(notice);
}

但是，该通知会出现一小会儿然后消失。如果在清空内容后执行此操作，为什么会发生这种情况？

看起来像这样：

function renderBatteries(url, notice) {
    if (url === undefined || url === null) url = '/battery/all';
    $.get(url, function(data) {
            $('#content').empty();
            $('#content').append(data['view']);
            if (data['empty']) {
                $('#batteries-list').empty();
                $('#content').append('<div class="alert alert-info top-buffer col-md-6 col-md-offset-3 text-center">No batteries found in the database.</div>');
            }
            if (notice) {
                $('#success').html(notice);
            }
        });
}

最佳答案

模态完成隐藏后会触发一个事件。创建一个调用您的函数的侦听器：

$('#add-new-battery').on('hidden.bs.modal', function (e) {
  renderBatteries();
});

在此处检查“事件”：http://getbootstrap.com/javascript/#modals-usage

关于javascript - 完成前一个操作后延迟执行JavaScript函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26915134/