blinkend und setTimeout

Question

Ich schreibe ein Spiel für Free Code Camp und ich muss eine Zahl mehrmals blinken.

Dies ist die Lösung, die ich gefunden, aber es sieht hässlich aus:

function blinkTheCount(symbol) { 

    document.getElementById('count').innerHTML = ''; 

    setTimeout(function() { 
     document.getElementById('count').innerHTML = symbol; 
     setTimeout(function() { 
      document.getElementById('count').innerHTML = ''; 
      setTimeout(function() { 
       document.getElementById('count').innerHTML = symbol; 
       setTimeout(function() { 
        document.getElementById('count').innerHTML = ''; 
        setTimeout(function() { 
         document.getElementById('count').innerHTML = symbol; 
        }, 200); 
       }, 200); 
      }, 200); 
     }, 200); 
    }, 200); 

} 

Könnten Sie bitte geben Sie mir etwas Hilfe, um es in eine modische Art und Weise zu schreiben?

Ich versuchte mit for-Schleife, aber ich komme in eine Seite hängen.

Tank dich sehr.

Answer 1

setInterval ist wahrscheinlich das, was Sie in diesem Fall verwenden möchten.

Wenn Sie den Inhalt des Containers nicht leeren müssen, versuchen Sie vielleicht, zwischen display: block und display: none für das gleiche Element zu wechseln. Überprüfen Sie einfach den Anzeigestatus des Containers und aktualisieren Sie ihn entsprechend.

var count = document.getElementById('count'); 
 

 
setInterval(function() { 
 
    count.style.display = count.style.display == 'none' ? 'block' : 'none'; 
 
}, 500);

<div id="count">3</div>

Answer 2

Vielen Dank an alle, es ist jetzt:

function blinkTheCount(symbol) { 

    var count = 0; 
    var blinkIt = setInterval(function() { 
     if (count++ === 5) { 
      clearInterval(blinkIt); 
     } 
     if (document.getElementById('count').innerHTML !== symbol) { 
      document.getElementById('count').innerHTML = symbol; 
     } else { 
      document.getElementById('count').innerHTML = ''; 
     } 
    }, 200); 

} 

Haben Sie einen schönen Tag!

Answer 3

ich setTimeout hier statt setInterval verwenden werden, nicht weil es die beste Option ist, sondern nur die OP zu zeigen, wie er die Zahl der blinkt mit setInterval steuern:

var max = 10, i = 0; 
var myvalues = ["test", "TEST"]; 
(function loop(){ 
    if(i++ > max) return; 
    var index = i%2; 
    setTimeout(function(){ 
     document.getElementById('count').innerHTML = myvalues[index]; 
     loop(); 
    }, 200) 
}()); 

Hier ist die Geige: https://jsfiddle.net/gerardofurtado/joypdg6g/