ウェブページを再ロードせずにwindow.onload javascriptプログラムを再起動/ループする方法

Question

私はこのjavascriptプログラムを使用して4秒ごとにウェブサイトの背景を変更しています。最後の画像が表示されてから4秒以上かかるようにする方法があるかどうか疑問に思っていました。私が試したやり方はうまくいきません。プログラムはページがロード/リロードされたときにのみ実行されるので、私は思うのですが、window.onloadなしでプログラムを起動する別の（単純な）方法があれば、ページをリロードせずにプログラムを再起動すると、私は知りたいです！

ここに私のコードは次のとおりです。

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(); 
} 

ありがとう！

Answer 1

あなたは

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>