Schleife zeigt nur die letzte Zeichenkette in einem Array an, wenn sie ein span-Tag hinzufügt

Ich möchte das Wort im Span-Tag alle 1,5 Sekunden ändern, aber bis jetzt wird nur das letzte Wort im Array 'list' angezeigt.Schleife zeigt nur die letzte Zeichenkette in einem Array an, wenn sie ein span-Tag hinzufügt

Hier ist mein Javascript

var list = [ 
    "websites", 
    "user interfaces" 
]; 


setInterval(function() { 
for(var count = 0; count < list.length; count++) { 
    document.getElementById("word").innerHTML = list[count]; 
}}, 1500);

Und hier ist der html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
    <span id="word"></span> 
</body> 
</html>

Quelle

2017-03-04 Jake123

Da Sie die volle for-Schleife in einem Lauf einzelner setInterval-Aufruf. Die for-Schleife wird zwischen setInterval-Aufrufen nicht pausiert. –

Sie möchten keine Schleife .... Sie wird jedes Mal ausgeführt, wenn das Intervall ausgelöst wird.Die gleiche Schleife läuft jedes Mal, wenn jedes Mal das gleiche Ergebnis erzeugt wird. – charlietfl

Aber wenn ich setInterval entferne und nur die for-Schleife habe, macht es dasselbe. – Jake123

Sie benötigen keine for Schleife müssen, dass nur verwenden setInterval, Ihre counter oder noch einfacher mit Array-Manipulation:

var list = [ 
 
    "websites", 
 
    "user interfaces", 
 
    "cool neh?" 
 
]; 
 

 
var count = 0; // Separate your count 
 

 
function changeWord() { // Separate your concerns 
 
    document.getElementById("word").innerHTML = list[count]; 
 
    count = ++count % list.length; // Increment and loop counter 
 
} 
 

 
changeWord();     // First run, 
 
setInterval(changeWord, 1500); // Subsequent loops

<span id="word"></span>

Wenn Sie möchten nicht ein counter aber tun mit es Manipulation Array:

var list = [ 
 
    "websites", 
 
    "user interfaces", 
 
    "cool neh?" 
 
]; 
 

 
var ELWord = document.getElementById("word"); // Cache elements you use often 
 

 

 
function changeWord() { 
 
    ELWord.innerHTML = list[0]; // Use always the first key. 
 
    list.push(list.shift()); // Push the first key to the end of list. 
 
} 
 

 
changeWord();     
 
setInterval(changeWord, 1500);

<span id="word"></span>

P. S: Die inverse wäre mit list.unshift(list.pop()) wie Sie here sehen können.

Leistungsmäßig sollte die Lösung mit counter schneller sein, aber Sie haben ein kleines Array, so dass der Unterschied keine Bedenken aufwerfen sollte.

Quelle

2017-03-04 12:40:10

Danke, das ist, was ich gesucht habe! – Jake123

@ Jake123 Ich habe auch eine (richtige) Möglichkeit hinzugefügt, es mit Array-Manipulation zu tun, wenn Sie interessiert sind - anstatt 'counter' zu verwenden. Bitte. Happy coding –

Okay danke dafür, nur eine weitere Frage gibt es eine Möglichkeit, jedes Wort zu verblassen? – Jake123

Sie wollen versuchen, diese kann. Kein Looping, nur alle 1,5 Sek. Eine changeWord Funktion aufrufen.

var list = [ 
 
     "websites", 
 
     "user interfaces" 
 
    ]; 
 
    var count = 0; 
 

 
    function changeWord() { 
 
     document.getElementById("word").innerHTML = list[count]; 
 
     count = count < list.length-1 ? count+1 : 0; 
 
    } 
 

 
    setInterval(function() { changeWord(); }, 1500);

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <span id="word"></span> 
 
</body> 
 
</html>

Quelle

2017-03-04 12:39:07 Mazz

Bessere Verwendung setTimeout. Jede Iteration sollte ihre eigene Zeitüberschreitung haben. See also

(() => { 
 
    const words = document.querySelector('#words'); 
 
    typeWords([ 
 
     "web sites", 
 
     "user interfaces", 
 
     "rare items", 
 
     "other stuff", 
 
     "lizard sites", 
 
     "ftp sites", 
 
     "makebelief sites", 
 
     "fake news sites", 
 
     "et cetera" 
 
    ]); 
 

 
    function typeWords(list) { 
 
    list.push(list.shift()) && (words.innerHTML = list[list.length-1]); 
 
    setTimeout(() => typeWords(list), 1500); 
 
    } 
 
})();

<div id="words"></div>

Quelle

2017-03-04 12:43:22 KooiInc

-1

Das Problem mit Ihrem Code ist, wenn Ihre Intervall-Funktion aufgerufen wird, Schleife druckt erhalten ausgeführt und das Element, weil Sie die gesamte innerhtml auf jeder Iteration ersetzen. Sie können den folgenden Code versuchen, wenn Sie das gesamte Listenelement nach dem Intervall immer wieder drucken möchten.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<span id="word"></span> 
</body>

Der Javascript-Code:

var list = [ 
"websites", 
"user interfaces" 
]; 
var count=0; 
function print() 
{ 
    document.getElementById("word").innerHTML = list[count]; 
count += 1; 
count%=list.length; 
} 
setInterval(print(), 1000);

Quelle

2017-03-04 12:58:35

ich von setTimeout() diesen Job machen würde wie folgt

function loopTextContent(a, el, dur = 1500){ 
 
    var i = -1, 
 
    len = a.length, 
 
    STID = 0, 
 
    looper = _ => (el.textContent = a[i = ++i%len], STID = setTimeout(looper,dur)); 
 
    looper(); 
 
    return _ => STID; 
 
} 
 

 
var list = ["websites", "user interfaces", "user experience", "whatever"], 
 
getSTID = loopTextContent(list, document.getElementById("word")); 
 
setTimeout(_ => clearTimeout(getSTID()),10000);

<span id="word"></span>

Quelle

2017-03-04 15:46:05 Redu

Schleife zeigt nur die letzte Zeichenkette in einem Array an, wenn sie ein span-Tag hinzufügt

Antwort

Verwandte Themen