随着超时淡入和淡出时，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> 

但是如您所见，我有问题，那就是运行不顺利。 而且它如此怪异地闪烁。 希望任何人都能帮助我。
〜菲利普

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>