Предупреждение при начальной загрузке не закрывается после первого появления

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>');

Предупреждение отображается на странице, и предупреждение закрывается! Однако, например, если я или пользователь захотим снова использовать форму, например, добавить новую запись в базу данных, предупреждение все же появится, но на этот раз оно никогда не закроется! Поэтому, если я добавлю еще 10 записей и нажму кнопку «Отправить» после каждой, как обычно, у меня появится 10 полей с предупреждениями, которые никогда не закрываются.

<script type="text/javascript">
    window.setTimeout(function() {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function() {
            $(this).hide();
        });
    }, 5000);
</script>

Кто-нибудь имеет представление о том, что я мог бы сделать вместо этого, возможно, сработает?

Приведенный ниже код закрывает предупреждение, но есть некоторые несоответствия относительно того, когда предупреждение закрывается.

$(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);
    }
}

Answer 1

1. Инициализация оповещения с помощью $('.alert').alert()
2. Закройте его с помощью $('.alert').alert('close') или $('.alert').alert('dispose')

Bootstrap 3.3 Документация - Оповещения

Документация по Bootstrap 4.0 - оповещения

Answer 2

setTimeout функция выполняется только один раз, когда setInterval проверяет регулярный интервал времени. Например: https://codepen.io/anon/pen/VGPYXB

Лучшим решением может быть добавление функции оповещения setTimeout после добавления сообщения или использование функции delay следующим образом https://codepen.io/anon/pen/XPpJGe.