Bootstrap toast - 不考虑数据延迟 - Toast 不隐藏

Question

点击表单的提交按钮（Ajax POST）后，我想用 Django 视图中生成的消息刷新 toast。我成功显示消息但不遵守数据延迟，吐司在 5 秒后不会消失。

<div id="messages" aria-live="polite" aria-atomic="true" style="position: relative">
        <div style="position: absolute; top: 12px; right: 12px;" >
            {% for message in messages %}
                    <div class="toast d-flex toast-success" role="alert" aria-live="assertive" aria-atomic="true" data-delay="3000">
                        <div class="toast-header toast-success shadow-none" >
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="toast-body">
                            {{message}} 
                        </div>
                    </div>
            {% endfor %}
        </div>
    </div>

在 Ajax 的成功部分，我有以下代码：

$('#messages).load(location.href + " #messages>*", "") 

Answer 1

在这种情况下，您可以使用 setTimeout：

$("#messages").load(location.href + " #messages>*", "");
setTimeout(function(){$("#messages").empty();}, 5000);

---

更新

阻止用setTimeout()设置的函数执行：

var myTimeout;

function myFunction() {
  clearTimeout(myTimeout);
  $("#messages").load(location.href + " #messages>*", "");
  myTimeout = setTimeout(function(){$("#messages").empty();}, 5000);
}