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);
}