Javascript 函数 setTimeout DOM 不工作

Question

我已经创建了显示错误并在 3s.Error 消息显示后淡出并且不会消失的功能。

 function showError(error){
  setTimeout(()=>{
    const errorDiv = document.createElement('div');
    errorDiv.className = 'alert alert-danger';
    //  placing a text with in div
    errorDiv.append(document.createTextNode(error));
    //placement of error
    const card = document.querySelector('.card');
    const heading = card.firstChild;
    card.insertBefore(errorDiv,heading);
  }
  ,3000);
}

我知道我可以声明另一个函数来淡出错误，而不是在上面提到的 showError 函数中调用 setTimeout。请问有人可以正确解释为什么 setTimout 不起作用吗？

Answer 1

您正在等待 3 秒来显示消息，而不是将其删除。

立即显示消息，然后使用 setTimeout() 将其删除。

function showError(error) {
  const errorDiv = document.createElement('div');
  errorDiv.className = 'alert alert-danger';
  errorDiv.append(document.createTextNode(error));
  const card = document.querySelector('.card');
  card.insertAdjacentElement('afterbegin', errorDiv);
  // remove after 3 seconds
  setTimeout(() => {
    errorDiv.remove();
  }, 3000);
}

Answer 2

抱歉问了这么可怕的问题。我认为 setTimout 函数在给定时间段内执行其内容。我不知道它的用途是什么，但现在我知道了。

setTimeout() 设置一个计时器，一旦计时器到期，该计时器就会执行一个函数或指定的代码段。

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

Javascript 函数 setTimeout DOM 不工作

Javascript function setTimeout DOM is not working

javascript

settimeout