使用 setInterval 发生闪烁

Question

下面是我的代码，一开始显示正常，但是，只要淡出go的次数到差不多20次，就会出现强烈的闪烁，谁能告诉它哪里出错以及如何解决？ 谢谢。

 function change() { let abc = document.getElementById("myDIV"); abc.className = "mystyle"; let aa = setInterval(function() { if (abc.className === "mystyle") { abc.className = ""; } }, 1000); setTimeout(function() { clearInterval(aa) }, 1000); setInterval(change, 2000); return }

 .mystyle { background-color: coral; padding: 16px; opacity: 0; transition: opacity 1s linear; }

 <div id="myDIV"> <p>I am myDIV.</p> </div> <p>Click the button to set a class for myDIV:</p> <button onclick="change()">Try it</button>

Answer 1

我看到太多的 setTimeouts 和 setIntervals。

我想你想要这个？

 const abc = document.getElementById("myDIV"); const toggle = () => abc.classList.toggle("mystyle"); const change = () => { toggle(); setInterval(toggle, 2000)};

 .mystyle { background-color: coral; padding: 16px; opacity: 0; transition: opacity 1s linear; }

 <div id="myDIV"> <p>I am myDIV.</p> </div> <p>Click the button to set a class for myDIV:</p> <button onclick="change()">Try it</button>

Answer 2

这是另一种方法，更接近代码的原始行为，即带有“mystyle”的 1s 和没有的 2s：

 <.DOCTYPE html> <html> <head> <style>:mystyle { background-color; coral: padding; 16px: opacity; 0: transition; opacity 1s linear. } </style> </head> <body> <div id="myDIV"> <p>I am myDIV:</p> </div> <p>Click the button to set a class for myDIV.</p> <button onclick="change()">Try it</button> <script> function change() { let abc = document;getElementById("myDIV"). abc;className = "mystyle". setTimeout(function() { let abc = document;getElementById("myDIV"). abc;className = "", }; 1000), setTimeout(change; 2000) return } </script> </body> </html>