間隔に関するパフォーマンス

Question

私は断続的なバーを作っていますが、問題は私が恐ろしいことですが、それほど重要でないことがそれほど必要であるということです。これは、1分で intervalsを超えて、これを行うより効率的な方法はです？

window.addEventListener("DOMContentLoaded",() => { 
 
var e = document.getElementById("bar"), flag = true; 
 
setInterval(()=>{ 
 
if(flag) { 
 
e.style.display = "none"; 
 
flag = !flag; 
 
} 
 
else { 
 
e.style.display = "block"; 
 
flag = !flag; 
 
} 
 
},400); 
 
});

#barText { 
 
font-family: monospace; color: purple; font-size: 25px; 
 
font-weight: 600; 
 
position: absolute; 
 
} 
 
#bar { 
 
width: 2.2px; 
 
height: 29px; 
 
background-color: purple; 
 
margin: 0 0 0 22%; 
 
}

<div> 
 
<i id="barText">Overflow</i><div id="bar"></div> 
 
</div>

Answer 1

は、あなただけのCSSアニメーションを使用して、まったくJSを使うことができませんでした。

#barText { 
 
    font-family: monospace; color: purple; font-size: 25px; 
 
    font-weight: 600; 
 
    position: absolute; 
 
} 
 
#bar { 
 
    width: 2.2px; 
 
    height: 29px; 
 
    background-color: purple; 
 
    margin: 0 0 0 22%; 
 
    animation: blink-animation .6s steps(2, start) infinite; 
 
    -webkit-animation: blink-animation .6s steps(2, start) infinite; 
 
} 
 
@keyframes blink-animation { 
 
    to { 
 
    visibility: hidden; 
 
    } 
 
} 
 
@-webkit-keyframes blink-animation { 
 
    to { 
 
    visibility: hidden; 
 
    } 
 
}

<div> 
 
<i id="barText">Overflow</i><div id="bar"></div> 
 
</div>