Wie man ein window.onload Javascript-Programm neu startet, ohne die Webseite neu zu laden

Question

Ich habe dieses Javascript-Programm, um den Hintergrund meiner Website alle 4 Sekunden zu ändern, und es beginnt richtig, wie die Seite lädt so automatisch. Ich habe mich gefragt, ob es eine Möglichkeit gibt, es über 4 Sekunden nach dem letzten Bild zu starten. Die Möglichkeiten, die ich versucht habe, funktionieren nicht, und ich denke es ist, weil das Programm nur ausgeführt wird, wenn die Seite geladen/neu geladen wird, also wenn es eine andere (einfache) Möglichkeit gibt, das Programm ohne window.onload zu starten Starten Sie das Programm neu, ohne die Seite neu zu laden, würde ich gerne wissen!

Hier ist mein Code:

window.onload = function timer() { 
setTimeout(change1, 4000) 
setTimeout(change2, 8000) 
setTimeout(change3, 12000) 
setTimeout(change4, 16000) 
setTimeout(change5, 20000) 
setTimeout(change6, 24000) 
setTimeout(change7, 28000) 
setTimeout(change8, 32000) 
setTimeout(change9, 36000) 
setTimeout(change10, 40000) 
setTimeout(change11, 40001) 
} 
function change1() { 
document.getElementById("header").style.backgroundImage = "url('images/battlefield1.jpg')"; 
} 
function change2() { 
document.getElementById("header").style.backgroundImage = "url('images/battlefront.jpg')"; 
} 
function change3() { 
document.getElementById("header").style.backgroundImage = "url('images/gtav.jpg')"; 
} 
function change4() { 
document.getElementById("header").style.backgroundImage = "url('images/doom4.jpg')"; 
} 
function change5() { 
document.getElementById("header").style.backgroundImage = "url('images/darksouls.jpg')"; 
} 
function change6() { 
document.getElementById("header").style.backgroundImage = "url('images/civVI.jpg')"; 
} 
function change7() { 
document.getElementById("header").style.backgroundImage = "url('images/stardew.jpg')"; 
} 
function change8() { 
document.getElementById("header").style.backgroundImage = "url('images/superhot.jpg')"; 
} 
function change9() { 
document.getElementById("header").style.backgroundImage = "url('images/watchdogs.jpg')"; 
} 
function change10() { 
document.getElementById("header").style.backgroundImage = "url('images/mafia.jpg')"; 
} 
function change11() { 
timer(); 
} 

Dank!

Answer 1

Sie auf diese Weise tun können

function timer() { 
 
    setTimeout(change1, 4000) 
 
    setTimeout(change2, 8000) 
 
    setTimeout(change3, 12000) 
 
    setTimeout(change4, 16000) 
 
    setTimeout(change5, 20000) 
 
    setTimeout(change6, 24000) 
 
    setTimeout(change7, 28000) 
 
    setTimeout(change8, 32000) 
 
    setTimeout(change9, 36000) 
 
    setTimeout(change10, 40000) 
 
    setTimeout(change11, 40001) 
 
} 
 

 
function change1() { 
 
    document.getElementById("header").style.backgroundImage = "url('images/battlefield1.jpg')"; 
 
    console.log("change1") 
 
} 
 

 
function change2() { 
 
    document.getElementById("header").style.backgroundImage = "url('images/battlefront.jpg')"; 
 
    console.log("change2") 
 
} 
 

 
function change3() { 
 
    document.getElementById("header").style.backgroundImage = "url('images/gtav.jpg')"; 
 
    console.log("change3") 
 
} 
 

 
function change4() { 
 
    document.getElementById("header").style.backgroundImage = "url('images/doom4.jpg')"; 
 
} 
 

 
function change5() { 
 
    document.getElementById("header").style.backgroundImage = "url('images/darksouls.jpg')"; 
 
} 
 

 
function change6() { 
 
    document.getElementById("header").style.backgroundImage = "url('images/civVI.jpg')"; 
 
} 
 

 
function change7() { 
 
    document.getElementById("header").style.backgroundImage = "url('images/stardew.jpg')"; 
 
} 
 

 
function change8() { 
 
    document.getElementById("header").style.backgroundImage = "url('images/superhot.jpg')"; 
 
} 
 

 
function change9() { 
 
    document.getElementById("header").style.backgroundImage = "url('images/watchdogs.jpg')"; 
 
} 
 

 
function change10() { 
 
    document.getElementById("header").style.backgroundImage = "url('images/mafia.jpg')"; 
 
} 
 

 
function change11() { 
 
    console.log("change11") 
 
    timer(); 
 
} 
 

 
timer();

<div id="header"></div>