javascript - 在 JQuery 运行时显示然后隐藏 Bootstrap Alert？

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>

如果您只是在简单的setTimeout()中调用removeClass()，那么警报肯定会出现 - 它们会在进程完成+设置后消失以毫秒为单位的量。这样您就可以确保在 setTimeout() 中设置的时间内至少显示警报。