Question

我有一个HTML按钮，该按钮调用一个使引导通知显示在屏幕上的函数。还有一个内置的jQuery方法，可使通知在1秒后消失。

该方法运行良好，但是如果我快速连续调用该方法（即单击按钮），则通知似乎在页面上“冻结”，必须刷新页面以删除冻结的通知。

我尝试过修改各种jQuery事件处理程序，这些处理程序将允许所有可见的通知在一定时间后最终消失。到目前为止，我还没有尝试过所需的方法。

这是与按钮单击相关的JS方法，它使通知显示并使其淡出。

function showDiv() {
    let div = document.createElement("div");
    div.innerHTML = '<div id="newAlert" class="alert alert- 
    info">Hello</div>'
    document.body.appendChild(div);
   $("#newAlert").delay(1000).fadeOut("slow", function() {
   $("#newAlert").remove();
});
}

我想要进行设置，以便无论我触发该方法多少次，出现的每个通知都会在1秒后消失。关于如何解决此问题的任何建议将不胜感激。谢谢

Answer 1

问题是所有这些对象的ID都相同。这是一个糟糕的主意，但应该可行。

function showDiv() {
    let div = document.createElement("div");
    let id = new Date().getTime();
    div.innerHTML = `<div id="${id}" class="alert alert-info">Hello</div>`
    document.body.appendChild(div);
    setTimeout(() => {
        $("#"+id).fadeOut("slow", function() {
          $("#"+id).remove();
        });
    }, 1000)

}

Answer 2

id中根本不需要。对象引用已存在。 jQuery还允许在单个语句中完成所有操作。像这样的东西。

function showDiv() {
  $("<div/>")
    .html('<div class="alert alert-info">Hello</div>')
    .appendTo('#notif')//or body
    .delay(1000).fadeOut("slow", function() {
      $(this).remove();
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="showDiv()">show</button>
<div id="notif"></div>

引导通知-快速调用方法导致通知在屏幕上冻结

2 个答案: