javascript - 如何在不重新加载网页的情况下重新启动/循环 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>