Die folgende Schleife durchläuft im Grunde genommen mein Array, das sumFormat ist, und zeigt dann jeden Wert des Arrays mit einem 500ms Intervall an, was in Ordnung ist, aber es zeigt die Array-Werte nur einmal gleichzeitig an

Zum Beispiel, wenn das Array [1, 2, 3] enthält

  • es zeigt 1 an, dann zeigt 500ms später 2 anstelle von 1 an.
  • aber ich möchte, dass es 1 und dann 500ms später 2 neben anzeigt
  • das 1 also 1 2
  • und dann 1 2 3 und so weiter,

Ich habe versucht, es herauszufinden, kann es aber nicht richtig machen.

for (var i = 0; i < sumFormat.length; i++) {
    (function(i) {
        setTimeout(function() {
            factOut.innerHTML = sumFormat[i];
        }, 500 * i);
    })(i);
}
0
Vassilis 24 Feb. 2020 im 10:42

3 Antworten

Beste Antwort

Verketten Sie mit dem vorhandenen innerHTML, anstatt es nur zuzuweisen, da dadurch alles überschrieben wird, was zuvor vorhanden war. Sie können auch let anstelle von var verwenden, um den Code viel übersichtlicher zu gestalten. Da Sie nur Text und kein HTML-Markup einfügen, sollten Sie stattdessen textContent verwenden:

const sumFormat = [1, 2, 3, 4, 5];
for (let i = 0; i < sumFormat.length; i++) {
  setTimeout(function() {
    factOut.textContent += ' ' + sumFormat[i];
  }, 500 * i);
}
<div id="factOut"></div>

Eine andere Methode, indem die Array-Elemente von 0 mit dem aktuellen Index verknüpft werden:

const sumFormat = [1, 2, 3, 4, 5];
for (let i = 0; i < sumFormat.length; i++) {
  setTimeout(function() {
    factOut.textContent = sumFormat.slice(0, i + 1).join(' ');
  }, 500 * i);
}
<div id="factOut"></div>
2
CertainPerformance 24 Feb. 2020 im 07:54

Hier Beispiel mit setInterval()

function SetValue(text, at){
     factOut.innerHTML += text[at] + (text.length-1 == at ?"":" "); 
} 

var sumFormat = [1,2,3,4,5];
var i = 0;
var myinterval = setInterval(function(){
     if(i == sumFormat.length){
      clearInterval(myinterval);
      return;
     }
     SetValue(sumFormat,i);
     i++;
},500) 
<div id="factOut" />
0
Ravi Makwana 24 Feb. 2020 im 07:55

Es gibt ein paar Dinge, die ich hier ändern würde.

Die Verwendung mehrerer setTimeouts und das Festlegen der Zeitüberschreitungen als steigende Werte können zu Problemen führen, wenn Sie viele davon möchten. Zeitüberschreitungen sind in JS eine begrenzte Ressource.

Eine Option ist möglicherweise die Verwendung von setInterval als jemand hier, wie gezeigt, aber mein Favorit ist die Verwendung von async / await.

Auch wenn Ihre Liste sehr lang würde, wäre eine ständige Änderung der innerHTML für das DOM nicht sehr freundlich. Stattdessen wäre es effizienter, ein weiteres DOM-Element zu erstellen und diese hinzuzufügen. Ein weiterer Vorteil von ihnen ist, dass es viel einfacher ist, sie auch zu stylen.

Im Folgenden finden Sie ein Beispiel für die Verwendung von async/await und das Hinzufügen zum DOM, anstatt das innerHTML ständig zu aktualisieren und zum Spaß nur ein wenig Stil hinzuzufügen.

const delay=ms=>new Promise(r=>setTimeout(r,ms));

(async function() {
  const sumFormat = [1,2,3,4];
  for (const i of sumFormat) {
    const num = document.createElement('span');
    num.innerText = i;
    factOut.appendChild(num);
    await delay(500);
  }
}());
span {
  padding: 0.2rem 0.4rem;
  margin: 0.2rem 0.3em;
  background-color: lightblue;
  border: 1px solid black;
  border-radius: 0.5rem;
}
<div id="factOut"></div>
1
Keith 24 Feb. 2020 im 12:07