javascript - 在给定的时间范围 javascript 后清除每个通知

Question

我正在研究某种类型的简单通知系统。

这是 jsfiddle:https://jsfiddle.net/t9pvmzhh/3/

我不知道为什么，但是 jsfiddle 不会显示所有 4 个通知，尽管它在我的页面上工作得很好。我可能做错了什么，你也可以帮我更正jsfiddle代码...

我已经开始着手在 1000 毫秒后清除每个通知，但卡在了 JS 代码的末尾。 “id”var 按预期返回 clear0()、clear1()，但现在我必须调用一个函数，而 function id { } 不工作。这可能吗？我可以调用这样的函数吗，或者我需要找到另一个解决方法(我可能会添加一个 X 来关闭通知，但自动关闭会更好)

HTML

<div class="notificontainer" id="notificontainer">
</div>

CSS

.notificontainer {
      position: fixed;
      border: 1px solid blue;
      width: 40vw;
      height: 20px;
      left: 30%;
      bottom: 10px;
    }

    .notification {
      display: none;
      transition: visibility .5s;
      position: absolute;
      border: 1px solid #44DDFF;
      background-color: rgb(0, 0, 0);
      width: 50%;
      height: auto;
      padding: 0;
      left: 25%;
      bottom: 0px;
      color: #ffffff;
    }

    .tooltipheader {
        margin: 0px;
        padding: 2%;
        text-align: center;
        border-bottom: 1px groove #949494;
        background-color: rgba(165,165,175, .1);
    }

JS

notification("Hi world1");
notification("Hi world2");
notification("Hi world3");
notification("Hi world4");

var counted = 0;

function notification(what) {
  counted++;
  var elem = document.getElementById("notificontainer");

  elem.innerHTML += "<div class=\"notification\" id=\"noty" + counted + "\"><div class=\"tooltipheader\"" + what + "</div></div>";
  document.getElementById("noty" + counted).style.bottom = counted * 40 + "px";
  document.getElementById("noty" + counted).style.display = "initial";

  var id = "clear" + counted + "()";

  window.setTimeout("clear" + counted, 1000);
}

Answer 1

您可以将参数传递给setTimeOut() 的 函数回调。 How can I pass a parameter to a setTimeout() callback?

setTimeout(function(param){
    console.log("noty"+param);
    document.getElementById("noty" + param).style.display = "none";
}.bind(null,counted), 3000);