随着超时而褪色时，Div闪烁

Question

一个div我正在使用像完成的msg一样。它应该在一个过程完成并在几秒钟后消失时出现。为此，我编码了这个小代码段：

function showProcessFinishedMsg(msg) {
    var done_msg = document.getElementById("done_msg");
    var done_msg_text = document.getElementById("done_msg_text");
    done_msg_text.innerHTML = msg;
    unfade(done_msg);
    setTimeout(fade(done_msg),60000);
  }
  //fading in
  function unfade(element) {
      var op = 0.1;  // initial opacity
      element.style.display = 'block';
      var timer = setInterval(function () {
          if (op >= 1){
              clearInterval(timer);
          }
          element.style.opacity = op;
          element.style.filter = 'alpha(opacity=' + op * 100 + ")";
          op += op * 0.1;
      }, 10);
  }
  //fading out
  function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}

.done_msg {
	height: 50px;
	width: 80%;
	left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
	position: absolute;
  bottom: 20px;
  background-color: #212121;
  border-radius: 8px;
  box-shadow: 1px 1px 5px #0d0d0d;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.done_msg_text {
	padding-left: 30px;
	color: #ffffff;
}

<div class="done_msg" id="done_msg" style="display: none;">
  <img src="./done.png" width="33px" height="auto">
  <p class="done_msg_text" id="done_msg_text">icbsiudbisbdvoaodvnoda</p>
</div>
<button onclick="showProcessFinishedMsg('Maybe it works, in a different universe.')">Testbutton</button>

，但是如您所见，我有问题，它的起作用并不顺利。而且它如此奇怪。希望任何人都可以帮助我。
〜FILIP

Answer 1

您的问题与：

setTimeout(fade(done_msg), 60000);

在这里，执行此行时，您正在调用fade函数，而不是像您认为自己一样的每一分钟。

setTimeout的第一个参数应该是可以执行的函数，但是，您正在立即执行该函数，因此您将第一个参数设置为fade的返回值，即undefined。

这会导致您的unfade和fade同时运行，从而导致闪烁。相反，将fade(done_msg)包装在其自己的功能中：

setTimeout(_ => fade(done_msg), 60000);

请参见下面的工作示例：

function showProcessFinishedMsg(msg) {
  var done_msg = document.getElementById("done_msg");
  var done_msg_text = document.getElementById("done_msg_text");
  done_msg_text.innerHTML = msg;
  unfade(done_msg);
  setTimeout(_ => fade(done_msg), 2000);
}
//fading in
function unfade(element) {
  var op = 0.1; // initial opacity
  element.style.filter = 'alpha(opacity=' + op * 100 + ")";
  element.style.display = 'flex';
  var timer = setInterval(function() {
    if (op >= 1) {
      clearInterval(timer);
    }
    element.style.opacity = op;
    element.style.filter = 'alpha(opacity=' + op * 100 + ")";
    op += op * 0.1;
  }, 10);
}
//fading out
function fade(element) {
  var op = 1; // initial opacity
  var timer = setInterval(function() {
    if (op <= 0.1) {
      clearInterval(timer);
      element.style.display = 'none';
    }
    element.style.opacity = op;
    element.style.filter = 'alpha(opacity=' + op * 100 + ")";
    op -= op * 0.1;
  }, 50);
}

.done_msg {
  height: 50px;
  width: 80%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  bottom: 20px;
  background-color: #212121;
  border-radius: 8px;
  box-shadow: 1px 1px 5px #0d0d0d;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.done_msg_text {
  padding-left: 30px;
  color: #ffffff;
}

<div class="done_msg" id="done_msg" style="display: none;">
  <img src="./done.png" width="33px" height="auto">
  <p class="done_msg_text" id="done_msg_text">icbsiudbisbdvoaodvnoda</p>
</div>
<button onclick="showProcessFinishedMsg('Maybe it works, in a different universe.')">Testbutton</button>