Javascript 设置间隔不起作用？每次仍需按下按钮

每次按下按钮时，我需要将图像从一个切换到另一个。我尝试过使用SetTimeout、setInterval等，但这些似乎都不起作用？我不确定我做错了什么

var列表=[
"https://assets.publishing.service.gov.uk/media/559fbe1940f0b6156700004d/traffic-light-red.jpg",
"https://assets.publishing.service.gov.uk/media/559fbe48ed915d1592000048/traffic-light-amber.jpg",
"https://assets.publishing.service.gov.uk/media/559fbe3e40f0b6156700004f/traffic-light-green.jpg",
"http://thndl.com/images/1_3.png"
];
var指数=0；
函数changeLights（）{
指数=指数+1；
if（index==list.length）
指数=0；
var myVar=setInterval（函数（）{
变更灯（）
}, 1000);
}
}();
换灯
错误

changeLights（）！=ChangeLights（）
警告

setInterval（）
不要在click函数中应用
setInterval（）
。在每个时间循环中，秒的时间都会减少。因此，它的更改时间会更短。因此，将setInterval与In click和color一起使用
change
是分开的


var列表=[
"https://assets.publishing.service.gov.uk/media/559fbe1940f0b6156700004d/traffic-light-red.jpg",
"https://assets.publishing.service.gov.uk/media/559fbe48ed915d1592000048/traffic-light-amber.jpg",
"https://assets.publishing.service.gov.uk/media/559fbe3e40f0b6156700004f/traffic-light-green.jpg",
"http://thndl.com/images/1_3.png"
];
var指数=0；
函数更改（）{
指数=指数+1；
if（index==list.length）
指数=0；
console.log（列表[索引]）
}
函数changeLights（）{
var myVar=setInterval（函数（）{
更改（）
}, 1000);
}
Change Lights
您正在调用的是
ChangeLights
而不是
ChangeLights
。但即使调用正确，也会创建一个间隔，每1000毫秒调用一次相同的函数。这意味着在第二次调用时，它会创建一个新的间隔并再次调用，而实际的间隔也会调用该函数

解决方案：分别初始化间隔和执行工作的函数

从
startLights
开始，并在间隔时间内调用
changeLights


var列表=[
"https://assets.publishing.service.gov.uk/media/559fbe1940f0b6156700004d/traffic-light-red.jpg",
"https://assets.publishing.service.gov.uk/media/559fbe48ed915d1592000048/traffic-light-amber.jpg",
"https://assets.publishing.service.gov.uk/media/559fbe3e40f0b6156700004f/traffic-light-green.jpg",
"http://thndl.com/images/1_3.png"
];
var指数=0；
函数changeLights（）{
指数=指数+1；
if（index==list.length）{
指数=0；
}
控制台日志（索引）；
}
函数startLights（）{
设置间隔（变更灯，1000）；
}
更改指示灯
如上答案所示-对函数的调用需要在函数外部。我建议的一个修改是使用模运算符（索引%3），它将允许图像不断循环，而不需要if语句。这是因为模数运算符在将数字除以运算符后给出余数-因此模数%3意味着，例如，如果索引为3，则余数为0，4给出1，5给出2，然后6返回0。因此，你有一个完美的循环计数，给出三个值0，1和2，而不必检查每一个


var列表=[
"https://assets.publishing.service.gov.uk/media/559fbe1940f0b6156700004d/traffic-light-red.jpg",
"https://assets.publishing.service.gov.uk/media/559fbe48ed915d1592000048/traffic-light-amber.jpg",
"https://assets.publishing.service.gov.uk/media/559fbe3e40f0b6156700004f/traffic-light-green.jpg",
"http://thndl.com/images/1_3.png"
];
var指数=0；
函数changeLights（）{
指数+=1；
document.getElementById（'imageSrc'）。textContent='Source:'+列表[索引%3]；
document.getElementById（'lights'）.src=list[索引%3]；
}
var myVar=setInterval（函数（）{
变更灯（）
}, 1000);

JS区分大小写，
ChangeLights（）
！=<代码>更改灯光（）
。还请注意，您可以直接为函数引用提供
setInterval
，如下所示：
var myVar=setInterval（changeLights，1000）
会立即告诉您问题所在。您可以定义
列表
，但不要对其执行任何操作。此外，我看不到
ChangeLights
的定义。还请注意，您的逻辑存在缺陷，因为您的代码每秒都会以指数方式创建新计时器，因此很可能在几秒钟后导致浏览器崩溃。我建议您将
setInterval（）
移动到
changeLights（）之外