javascript - 超时淡入淡出时div闪烁

Question

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

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>

但如您所见，我遇到了问题，即它运行不顺畅。而且闪烁的很诡异。希望有人能帮助我。
~菲利普

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>