在运行JQuery时显示然后隐藏Bootstrap警报？

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()中设置的时间中最少显示。