引导警报关闭时间与超时不一致

Question

这是一个很难解释和演示的问题，基本上我使用的是PHP，Smarty，Ajax和Bootstrap的混合物。

我有一个聪明的模板，其中带有Ajax表单（此方法有效），一个PHP后端，该表单将表单详细信息添加到数据库中（这也有效），成功或失败时将显示警报，该警报来自Bootstrap CSS，将其写入页面，如下所示。

$('form').append('<div class="alert alert-success alert-dismissible" role="alert">' + data.message + '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></div>');

警报确实显示在页面中，并且警报确实关闭！我确实有一个问题，即一旦提交表单，警报将无法关闭，这是通过以下代码解决的，但是此代码引入了一个新问题，即警报无法完全一致地关闭，我想警报会在关闭前显示5秒钟，但并非总是如此，有时会立即关闭或至少在显示一秒钟后关闭。

$(document).ready(function() {
    $('form').submit(function(event) {

        // snip

        var alertTimer1 = window.setInterval(function() {
            if (typeof alertTimer2 === 'undefined') {
                var alertTimer2 = window.setTimeout(function() {
                    $('#alert').find('.alert').fadeTo(1000, 0).slideUp(1000, function() {
                        $(this).remove();

                        window.clearInterval(alertTimer1);
                        window.clearTimeout(alertTimer2);
                    });
                }, 5000);
            }
        }, 100);
    }
}

对于显示警报，关闭该警报，关闭后续警报而在显示5秒钟后页面没有刷新的问题，有人可以解决吗。