javascript无限循环中的多个函数

Question

我正在我的博客网站上工作，我遇到了javascript中无限循环的问题，在我的网站上，我有一架飞机，它从一个城市飞到另一个城市，当它停在一个城市时，语音气泡应该会弹出，目前效果很好，但只在1个循环中，所以我问我应该如何让这个javascript循环一次又一次，持续无限时间。我发现了while(true(和for(；；(之类的东西，但这些东西破坏了我的网络。这是我想循环的代码：

var washington_start = setTimeout(washington_timer, 10000);
var london_stop;
var washington_start;
var washington_stop;
var brasilia_start;
var brasilia_stop;
function washington_timer() {
document.getElementById("washington_info").style.opacity = '1';
document.getElementById("washington_info").style.visibility = 'visible';
document.getElementById("washington_info").style.transition = '.5s';
document.getElementById("washington_info").style.zIndex = '4';
document.getElementById("washington_info").style.backgroundColor = '#00aabb';
document.getElementById("washington_info").style.scale = '1';
document.getElementById("bg").style.backgroundImage = "url('img/washington.jpg')";
document.getElementById("bg").style.backgroundSize='cover';
document.getElementById("bg").style.transition = '1s';
washington_stop = setTimeout(washington_stoper, 3400);
}
function washington_stoper() {
document.getElementById("washington_info").style.opacity = '0';
document.getElementById("washington_info").style.visibility = 'hidden';
document.getElementById("washington_info").style.zIndex = '2';
document.getElementById("washington_info").style.scale = '0';
document.getElementById("bg").style.backgroundImage = "url('img/chata_blured.jpg')";
document.getElementById("bg").style.transition = '1s';
brasilia_start = setTimeout(brasilia_timer, 4250);
}
function brasilia_timer() {
document.getElementById("brasilia_info").style.opacity = '1';
document.getElementById("brasilia_info").style.visibility = 'visible';
document.getElementById("brasilia_info").style.transition = '.5s';
document.getElementById("brasilia_info").style.zIndex = '4';
document.getElementById("brasilia_info").style.backgroundColor = '#00aabb';
document.getElementById("brasilia_info").style.scale = '1';
document.getElementById("bg").style.backgroundImage = "url('img/brasilia.jpg')";
document.getElementById("bg").style.transition = '1s';
brasilia_stop = setTimeout(brasilia_stoper, 6000);
}
function brasilia_stoper() {
document.getElementById("brasilia_info").style.opacity = '0';
document.getElementById("brasilia_info").style.visibility = 'hidden';
document.getElementById("brasilia_info").style.zIndex = '2';
document.getElementById("brasilia_info").style.scale = '0';
document.getElementById("bg").style.backgroundImage = "url('img/chata_blured.jpg')";
document.getElementById("bg").style.transition = '1s';
london_start = setTimeout(london_timer, 10000);
}
function london_timer() {
document.getElementById("london_info").style.opacity = '1';
document.getElementById("london_info").style.visibility = 'visible';
document.getElementById("london_info").style.transition = '.5s';
document.getElementById("london_info").style.zIndex = '4';
document.getElementById("london_info").style.backgroundColor = '#00aabb';
document.getElementById("london_info").style.scale = '1';
document.getElementById("bg").style.transition = '1s';
document.getElementById("bg").style.backgroundImage = "url('img/london.jpg')";
london_stop = setTimeout(london_stoper, 6000);
}
function london_stoper() {
document.getElementById("london_info").style.opacity = '0';
document.getElementById("london_info").style.visibility = 'hidden';
document.getElementById("london_info").style.zIndex = '2';
document.getElementById("london_info").style.scale = '0';
document.getElementById("bg").style.transition = '1s';
document.getElementById("bg").style.backgroundImage = "url('img/chata_blured.jpg')";
}

此外，我刚开始使用javascript，所以如果它没有任何简单的解释，请尝试向我解释更多，谢谢！

Answer 1

这可以通过在london_stoper函数中添加washington_start = setTimeout(washington_timer, 10000);来实现：

var washington_start = setTimeout(washington_timer, 10000);
var london_stop;
var washington_start;
var washington_stop;
var brasilia_start;
var brasilia_stop;
function washington_timer() {
document.getElementById("washington_info").style.opacity = '1';
document.getElementById("washington_info").style.visibility = 'visible';
document.getElementById("washington_info").style.transition = '.5s';
document.getElementById("washington_info").style.zIndex = '4';
document.getElementById("washington_info").style.backgroundColor = '#00aabb';
document.getElementById("washington_info").style.scale = '1';
document.getElementById("bg").style.backgroundImage = "url('img/washington.jpg')";
document.getElementById("bg").style.backgroundSize='cover';
document.getElementById("bg").style.transition = '1s';
washington_stop = setTimeout(washington_stoper, 3400);
}
function washington_stoper() {
document.getElementById("washington_info").style.opacity = '0';
document.getElementById("washington_info").style.visibility = 'hidden';
document.getElementById("washington_info").style.zIndex = '2';
document.getElementById("washington_info").style.scale = '0';
document.getElementById("bg").style.backgroundImage = "url('img/chata_blured.jpg')";
document.getElementById("bg").style.transition = '1s';
brasilia_start = setTimeout(brasilia_timer, 4250);
}
function brasilia_timer() {
document.getElementById("brasilia_info").style.opacity = '1';
document.getElementById("brasilia_info").style.visibility = 'visible';
document.getElementById("brasilia_info").style.transition = '.5s';
document.getElementById("brasilia_info").style.zIndex = '4';
document.getElementById("brasilia_info").style.backgroundColor = '#00aabb';
document.getElementById("brasilia_info").style.scale = '1';
document.getElementById("bg").style.backgroundImage = "url('img/brasilia.jpg')";
document.getElementById("bg").style.transition = '1s';
brasilia_stop = setTimeout(brasilia_stoper, 6000);
}
function brasilia_stoper() {
document.getElementById("brasilia_info").style.opacity = '0';
document.getElementById("brasilia_info").style.visibility = 'hidden';
document.getElementById("brasilia_info").style.zIndex = '2';
document.getElementById("brasilia_info").style.scale = '0';
document.getElementById("bg").style.backgroundImage = "url('img/chata_blured.jpg')";
document.getElementById("bg").style.transition = '1s';
london_start = setTimeout(london_timer, 10000);
}
function london_timer() {
document.getElementById("london_info").style.opacity = '1';
document.getElementById("london_info").style.visibility = 'visible';
document.getElementById("london_info").style.transition = '.5s';
document.getElementById("london_info").style.zIndex = '4';
document.getElementById("london_info").style.backgroundColor = '#00aabb';
document.getElementById("london_info").style.scale = '1';
document.getElementById("bg").style.transition = '1s';
document.getElementById("bg").style.backgroundImage = "url('img/london.jpg')";
london_stop = setTimeout(london_stoper, 6000);
}
function london_stoper() {
document.getElementById("london_info").style.opacity = '0';
document.getElementById("london_info").style.visibility = 'hidden';
document.getElementById("london_info").style.zIndex = '2';
document.getElementById("london_info").style.scale = '0';
document.getElementById("bg").style.transition = '1s';
document.getElementById("bg").style.backgroundImage = "url('img/chata_blured.jpg')";var washington_start = 
setTimeout(washington_timer, 10000);
}

您还可以通过使用ES6生成器和CSS类来避免大量重复代码：

const iterator=(function*(){
const cities = [
{city: 'washington', waitBefore: 10000, waitAfter: 3400},
{city: 'brasilia', waitBefore: 4250, waitAfter: 6000},
{city: 'london', waitBefore: 10000, waitAfter: 6000},
]
const bgClass = document.getElementById('bg').classList
function activate(city, flag){
document.getElementById(city+'_info').classList.toggle('active', flag)
bgClass.toggle(city, flag)
}
while(true)
for(const {waitBefore, waitAfter, city} of cities){
yield waitBefore
activate(city, true)
yield waitAfter
activate(city, false)
}
})()
(function iterate(t){
setTimeout(() => iterate(iterator.next()), t)
})()

[id$="_info"]{
opacity: 0;
z-index: 2;
background-color: #00aabb;
scale: 0;
}
[id$="_info"].active{
opacity: 1;
z-index: 4;
scale: 1;
}
#bg{
background-size: cover;
background-image: url('img/chata-blur.jpg');
transition: 1s;
}
#bg.washington{
background-image: url('img/washington.jpg');
}
#bg.brasilia{
background-image: url('img/brasilia.jpg');
}
#bg.london{
background-image: url('img/london.jpg');
}