Die Leistung in Bezug auf das Intervall

Question

Ich habe eine intermittierende Bar gemacht, das Problem ist, dass ich fürchte, dass etwas so unbedeutend so viel erfordert, mit diesem ich meine, dass in 1 Minute mehr als intervals gemacht wurden, Gibt es eine effizientere Möglichkeit, dies zu tun?

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

Sie könnten nur eine CSS-Animation verwenden und JS nicht verwenden.

#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>