Показать, а затем скрыть Bootstrap Alert, пока JQuery работает?

Question

Когда пользователь меняет раскрывающийся список на моей странице, у меня есть JQuery, который делает "вещи". Я хочу добавить класс "show" в мое предупреждение Bootstrap, а затем удалить его, когда будет сделано "stuff". В своей текущей попытке я использую метод Deferred.done(), но он не работает так, как я намереваюсь. Функции addClass и removeClass запускаются до обновления DOM, поэтому предупреждение никогда не отображается. Любые советы?

Код:

$(".my-dropdown").change(function() {
    var show_alert = function() {
        var r = $.Deferred();
        $('#update-alert').addClass("show");
        return r;
    }

    var updategraph = function() {
        "stuff"
        $('#update-alert').removeClass("show");
    }

    show_alert().done(updategraph());
})

Answer 1

Может быть, вы можете попробовать это:

// setting up a function to wrap the removeClass() in a
// setTimeout() function
const removeShowClass = () => {
  setTimeout(function() {
    jQuery('#alert').removeClass('show')
  }, 2000)
}

// simulating a "quick" process
jQuery('#quick').on('click', function(e) {
  jQuery('#alert').addClass('show')
  removeShowClass()
})

// simulating a "slow" process
jQuery('#slow').on('click', function(e) {
  jQuery('#alert').addClass('show')
  setTimeout(function() {
    removeShowClass()
  }, 2000)
})

.alert:not( .show) {
  visibility: hidden;
}

.alert.show {
  visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="alert" class="alert">ALERT</div>
<br />
<br />
<button id="quick">QUICK PROCESS ALERT</button>
<br />
<br />
<button id="slow">SLOW PROCESS ALERT</button>

Если вы просто наберете removeClass() в виде простого setTimeout(), то предупреждения обязательно появятся - они исчезнут после процесса закончено + заданная сумма в миллисекундах. Таким образом, вы можете убедиться, что alert отображается минимально за время, установленное в setTimeout().