javascript - 我对 JS 中的 setInterval 有什么错误

Question

我正在发送 Toast 通知。

我希望当我点击“Toast Notification”按钮时，通知消息会出现在底部，过一会儿，消息就会消失。

所以我将消失时间设置为 5s ，然后单击按钮后 5 秒后，消息依次消失。

但消失的时间，除了第一次消失外，并不是5秒。

时间越来越快，消失不见。这不是我之前设置的 5 秒

我的英语不好，所以我希望你通过运行下面的代码来理解

let toast = document.querySelector('.toast');
let notification = document.querySelector(".notification")
let sec = 5000;

toast.addEventListener('click', () => {
  let newDiv = document.createElement("span");
  let newText = document.createTextNode("No Way!");
  newDiv.classList.add("notification_word");
  newDiv.appendChild(newText);
  notification.appendChild(newDiv);

  if (document.querySelector(".notification_word")) {
    setInterval(function() {
      removeNotification()
    }, sec);
  }

})

function removeNotification() {
  document.querySelectorAll(".notification_word")[0].remove()
}

body {
  text-align: center;
  justify-content: center;
  align-items: center;
}

button.toast {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  font-size: 20px;
  background: rgb(215, 188, 240);
  margin: -100px 0 0 -100px;
  border: 1px solid rgb(28, 3, 51);
  border-radius: 20px;
  cursor: pointer;
}

button.toast:hover {
  background: rgb(178, 157, 201);
}

.notification {
  display: flex;
  flex-direction: column-reverse;
  position: absolute;
  right: 2%;
  bottom: 2%;
}

span.notification_word {
  background-color: rgb(196, 77, 243);
  padding: 10px 0;
  margin: 3px;
  width: 100px;
  border: 1px solid rgb(28, 3, 51);
  border-radius: 5px;
}

<button class="toast">Toast Notification</button>
<div class="notification">
</div>

标签： javascripthtml

Answer 1

在您的代码中发生 -> 单击按钮后 5 秒，单击按钮后出现的通知消失。

在我编写的代码中，延迟 5 秒后，它将删除最旧的通知：它将循环

我想你可以理解。

试试这段代码...

  let toast = document.querySelector('.toast');
  let notification = document.querySelector(".notification");
  let sec = 5000;
  let Divarray = [];
  let arraynum = 0;

  toast.addEventListener('click', () => {
    let newDiv = document.createElement("span");
    let newText = document.createTextNode("No Way!"+arraynum);
    newDiv.classList.add("notification_word");
    newDiv.appendChild(newText);
    notification.appendChild(newDiv);
    Divarray[arraynum] = newDiv;
    arraynum += 1;
  })
  function array(){
    setInterval(function(){
      Divarray.splice(arraynum, 1);
      removeNotification();
      
    },sec);
  }
  array();

  function removeNotification() {
    document.querySelectorAll(".notification_word")[0].remove();
  }

body {
  text-align: center;
  justify-content: center;
  align-items: center;
}

button.toast {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  font-size: 20px;
  background: rgb(215, 188, 240);
  margin: -100px 0 0 -100px;
  border: 1px solid rgb(28, 3, 51);
  border-radius: 20px;
  cursor: pointer;
}

button.toast:hover {
  background: rgb(178, 157, 201);
}

.notification {
  display: flex;
  flex-direction: column-reverse;
  position: absolute;
  right: 2%;
  bottom: 2%;
}

span.notification_word {
  background-color: rgb(196, 77, 243);
  padding: 10px 0;
  margin: 3px;
  width: 100px;
  border: 1px solid rgb(28, 3, 51);
  border-radius: 5px;
}

<button class="toast">Toast Notification</button>

<div class="notification">
</div>