setInterval wird nur einmal ausgeführt, wenn versucht wird, eine Funktion auszuführen, die querySelectorAll-Array durchläuft

Question

Ich bin neu in Javascript, so dass ich Grundkenntnisse fehlt, aber ich verstehe nicht, warum ein Problem in diesem Code ist.

Ich versuche, einen "Konsolen-Typ-Effekt" zu erstellen, der im Grunde bedeutet, dass der ausgewählte Text so aussieht, als wäre er in Echtzeit eingegeben, nachdem die Seite geladen wurde. Ich weiß, dass es ähnliche Effekte gibt, aber ich möchte dies in Vanille JS (keine Frameworks) tun.

Was ich bisher getan (Pseudocode):

1. Get Elemente mit .console-Effekt Klasse Ende speichern sie in „Elementliste“
2. Schleife durch die Elemente und einen Cursor auf dem hinzufügen Ende des Textes haben sie. Machen
3. (hier i fehlgeschlagen :() die Cursor

blinkt, während ich, dass gefunden Debuggen in nach dem Cursor Schleifen (um sie zu blinken) einmal, die Methode „elem.style.opacity“, sagt dass das Element hat es ist "undefined" ...

document.body.onload = function() { 

    function addCursor(element) { 
     // Create a Span with the cursor character and give it an class of .cursor 
     var newSpan = document.createElement('span'), 
      newSpanText = document.createTextNode('|'); 
     newSpan.appendChild(newSpanText); 
     newSpan.className = 'cursor'; 

     //Add newSpan to the element var(passed trough the function) 
     element.appendChild(newSpan); 
    } 

    function animateCursor() { 
     var cursors = document.querySelectorAll('.cursor'); 

     for (var i = 0; i < cursors.length; i++) { 
      cursors[i].style.opacity = '0'; 
      setTimeout(function() { 
       cursors[i].style.opacity = '1'; 
      }, 500); 
     } 
    } 

    setInterval('animateCursor()', 1000); 

    var elementsList = document.querySelectorAll('.console-effect'); 
    for (var i = 0; i < elementsList.length ; i++) { 
     addCursor(elementsList[i]); 
    } 

}; 

Answer 1

Ihre Funktion in Timeout aufgerufen über den Cursor nicht wissen:

setTimeout(function() { 
    cursors[i].style.opacity = '1'; 
}, 500); 

so etwas wie dies funktionieren sollte:

setTimeout(function() { 
    this.style.opacity = '1'; 
}.bind(cursors[i]), 500); 

auch wenn ich sicher bin, Sie einige explainations finden, lassen Sie mich wissen, ob Sie Hilfe brauchen. Btw: Lambda Ninja hat recht über eine Funktion als Zeichenfolge übergeben - Sie sollten das ändern

Answer 2

die () vom animateCursor() im setInterval() entfernen

Ie, etwa so:.

setInterval(animateCursor, 1000); 

Die Klammern bewirken, dass die Funktion sofort ausgeführt wird. Wenn Sie es ohne die Klammern setzen, wird es als Parametervariable an setInterval() übergeben.