аварийное закрытие начальной загрузки несовместимо с таймаутом

Question

Это очень сложная проблема для объяснения и демонстрации, в основном я использую смесь PHP, Smarty, Ajax и Bootstrap.

У меня есть шаблон smarty с формой Ajax (это работает), бэкэнд PHP, который добавляет детали формы в базу данных (это также работает), при успехе или неудаче отображается предупреждение, это предупреждение от Загрузочный 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 секунд.