zeigen eine Zeile pro Sekunde in Javascript

Question

ich eine Zeile pro Sekunde in Javascript zeigen wollen, aber es funktioniert nicht ...

https://jsfiddle.net/d9a784ta/

function showIt1() { 
    document.getElementById("div1").style.visibility = "visible"; 
} 
function showIt2() { 
    document.getElementById("div2").style.visibility = "visible"; 
} 
function showIt3() { 
    document.getElementById("div3").style.visibility = "visible"; 
} 

window.onload = function() { 
setTimeout("showIt1()", 1000); 
setTimeout("showIt2()", 2000); 
setTimeout("showIt3()", 3000); 
} 

Answer 1

Sie display Eigenschaft mit block Wert verwenden konnte, weil es die anfängliche display: none überschreibt.

Zur Verwendung von setTimeout können Sie den Verweis auf die Funktion einfügen, ohne Strings zu verwenden und den Parameter für id angeben und nur eine Funktion verwenden.

function showIt(id) { 
 
    document.getElementById(id).style.display = "block"; 
 
} 
 

 
window.onload = function() { 
 
    setTimeout(showIt, 1000, 'div1'); 
 
    setTimeout(showIt, 2000, 'div2'); 
 
    setTimeout(showIt, 3000, 'div3'); 
 
};

#div1, #div2, #div3 { display: none; }

<div id="div1"><h1>1 line</h1></div> 
 
<div id="div2"><h1>2 line</h1></div> 
 
<div id="div3"><h1>3 line</h1></div>

Answer 2

Sie benötigen die Funktion direkt zu verweisen, nicht mit einer Zeichenfolge:

function showIt1() { 
    document.getElementById("div1").style.visibility = "visible"; 
} 
function showIt2() { 
    document.getElementById("div2").style.visibility = "visible"; 
} 
function showIt3() { 
    document.getElementById("div3").style.visibility = "visible"; 
} 

window.onload = function() { 
setTimeout(showIt1, 1000); 
setTimeout(showIt2, 2000); 
setTimeout(showIt3, 3000); 
} 

Answer 3

In setTimeout geben Sie das erste Argument als Zeichenfolge an. Es sollte ein Name, der Funktion, wie dies:

function showIt1() { 
    document.getElementById("div1").style.visibility = "visible"; 
} 
function showIt2() { 
    document.getElementById("div2").style.visibility = "visible"; 
} 
function showIt3() { 
    document.getElementById("div3").style.visibility = "visible"; 
} 

window.onload = function() { 
    setTimeout(showIt1, 1000); 
    setTimeout(showIt2, 2000); 
    setTimeout(showIt3, 3000); 
} 

---

setTimeout() akzeptiert Funktion als es erste Parameter ist:

setTimeout(showIt1, 1000); 

Also, alles aussehen würde. Wenn Sie eine Funktion namens showIt1 erstellen, dann, wenn Sie zum Beispiel an die Konsole so etwas schreiben:

console.log(showIt1) 

Es wird ausgegeben: „Funktion“. Also das ist, warum Sie auch SetTimeout erlaubt sind() aufrufen wie folgt aus:

setTimeout(function() { 
    document.getElementById("div1").style.visibility = "visible"; 
}, 1000); 

Answer 4

Ein paar Dinge:

1) geändert document.getElementById für JQquery $("#id")

2) hinzugefügt Zitate auf Ihrem <div> ids

3) unter Verwendung von CSS () Funktion:

HTML:

<div id="div1"><h1>1 line</h1></div> 
<div id="div2"><h1>2 line</h1></div> 
<div id="div3"><h1>3 line</h1></div> 

JS:

function showIt1() { 
    $("#div1").css('display','block'); 
} 
function showIt2() { 
    $("#div2").css('display','block'); 
} 
function showIt3() { 
$("#div3").css('display','block'); 
} 

window.onload = function() { 
console.log('onload'); 
setTimeout("showIt1()", 1000); 
setTimeout("showIt2()", 2000); 
setTimeout("showIt3()", 3000); 
} 

JSFiddle: https://jsfiddle.net/dudu84/d9a784ta/2/