如何防止多次显示此警告消息

Question

正如您在图片中看到的，每当我触发点击事件监听器时，警告就会自然出现。但是我怎样才能让它只出现一次。提前致谢。

function eventListeners() {
form.addEventListener("submit", addTodo)
}
function showAlert(type, message) {
    const alert = document.createElement("div")
    alert.className = `alert alert-${type} d-inline p-1`
    alert.setAttribute("style", "border-radius: 2rem")
    alert.textContent = message
    form.appendChild(alert)
    setTimeout(function () {
        alert.remove()
    }, 1000)   
}

Answer 1

// 不是一个好的解决方案。

试试这个：

let isAlertBeingShown = false 

function eventListeners() {
form.addEventListener("submit", addTodo)
}
function showAlert(type, message) {
    if( isAlertBeingShown ) {
       //Do not show alert. Simply return.
       return; 
      // or you can do alert.remove here instead of return.

    }
    const alert = document.createElement("div")
    alert.className = `alert alert-${type} d-inline p-1`
    alert.setAttribute("style", "border-radius: 2rem")
    alert.textContent = message
    form.appendChild(alert);
    isAlertBeingShown = true;
    setTimeout(function () {
        alert.remove();
        isAlertBeingShown = false;
    }, 1000)   
}

Answer 2

注意： 无需创建 div 并添加到表单，然后一次又一次地删除它，您只需添加单个 div 和 id message in html for message 并使用其 css display 属性 to none 隐藏它，然后使用 javascript 函数更改 div 和 show/hide 中的消息。

let alert = document.querySelector('#message');
function showAlert(type, message) {
    alert.textContent = message;
    alert.display = 'block';
    setTimeout(function () {
        alert.display = 'none';
        alert.textContent = '';
    }, 1000)   
}

如何防止多次显示此警告消息

How to prevent this warning message from revealing multiple times

javascript

createelement