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

debugcn 发表于 Dev

用户名

我正在开发某种类型的简单通知系统。

这是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);
    }

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);
}

acid_srvnn

您可以将参数传递给setTimeOut()'s函数回调。如何将参数传递给setTimeout（）回调？

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。