setInterval in Javascript läuft zu schnell

Question

Ich habe diese Art von Informationen herumschweben gesehen, aber ich kann nicht herausfinden, warum mein spezielles Setup durch die Funktion so schnell blinkt. Hier

ist das, was ich zu tun versucht:

Ich habe Quadrate auf einer Seite, die ich, um leuchten müssen, aber 500 Millisekunden auseinander. Ich speichere die jQuery-Kennung in einem Array und durchlaufe sie.

function glow(source) {// glows 
    $(source).addClass("square-active") 
    setTimeout(function() { 
    $(source).removeClass("square-active"); 
    }, 500); 
} 

function iterator() { 
    var y = 0; 
    setTimeout(function() { 
    for (var t=0; t<newComp.slice(0, numTurn).length; t++) { 
      glow(squareArr[newComp[t]].div) 
     y = y + 1 
} 
    }, 500 * y) 
     } 

Ich weiß, dass die Quadrate ordnungsgemäß durchlaufen werden, da ich diese für Verifikationszwecke in der Konsole angemeldet habe. Ich kann sehen, wie die Quadrate der Reihe nach blinken, aber es ist wahnsinnig schnell.

Wenn ich versuche, die glow() -Funktion in SetInterval zu wickeln, glaube ich nicht, dass es auch funktioniert.

Was mache ich falsch?

Answer 1

Grundsätzlich Sie (mit setTimeout) eine Reihe von Funktionen, die Erfassung der Index jedes Quadrates planen möchten, 500 ms auseinander das Highlight Platz.

function iterator() { 
    for (let t=0; t<newComp.slice(0, numTurn).length; t++) { 
     setTimeout(function() { 
      glow(squareArr[newComp[t]].div) 
     }, 500 * t) 
    } 
} 

verwendet das let Schlüsselwort den Wert t im lexikalischen Umfang Aufzeichnung der verschachtelten Funktion zu erfassen, die glow aufruft. Wenn Sie die Variable y wieder aktivieren wollen, gehen Sie vor - es scheint nur den gleichen Wert wie t zu haben.

Die Verwendung von let ist wichtig. In der häufig gestellten Frage JavaScript closure inside loops – simple practical example können Sie den Wert von Schleifenvariablen innerhalb eines Abschlusses ohne Verwendung von let erfassen.

Answer 2

Das heißt, da jedes Mal des glow() Funktion aufgerufen wird, eine neue Instanz der anonymous Funktion() erzeugt, das aus dem vorherigen Beispiel ist völlig anders, es geschieht so, dass, nur wenn die Zeitüberschreitung von Instanzx der anonymen Funktion beendet ist, schließt Instanz y auch, was bedeutet, dass Sie newComp.slice (0, Numturn) .length anonyme Funktionen jeweils mit ihren eigenen Timeout von 500 ms haben ein sehr schnelles Leuchten erzeugen.

Answer 3

Sie benötigen setTimeout innerhalb der for-Schleife bewegen

function iterator() { 
    var y = 0; 
    for (var t=0; t<newComp.slice(0, numTurn).length; t++) { 
setTimeout(function() { 
     glow(squareArr[newComp[t]].div) 
     y = y + 1 
},500); 
     }