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

Question

当用户更改我页面上的下拉菜单时，我有一些 JQuery 会 "stuff"。我想将 "show" class 添加到我的 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()，那么警报肯定会出现 - 它们会在进程完成后消失 + 以毫秒为单位设置数量。通过这种方式，您可以确保 alert 在 setTimeout().

中设置的时间最少显示

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

Show and then hide a Bootstrap Alert while JQuery runs?

javascript

jquery

jquery-deferred

bootstrap-4