我正在使用 javascript，并尝试迭代数组中定义的一些颜色，只是为了确保我正确输入了颜色名称。我使用了以下代码:
<body onload="show_colors()">
<script>
var colors = ["blue", "cyan", "bisque", "gray", "green", "magenta", "orange", "red", "aqua", "yellow", "azure", "cadetblue", "plum"].sort();
var myBody = document.getElementsByTagName("body")[0];
function show_colors() {
for (var i=0; i<colors.length; i++) {
setTimeout(setBackgroundColor(colors[i]), 2000)
}
}
function setBackgroundColor(color) {
console.log('setting color to ' + color);
myBody.style.background=color;
}
</script>
令我惊讶的是，页面加载得非常快，并且在背景中仅显示“黄色”。我想要求使用 setTimeout 有 2 秒的延迟。如果我查看控制台，我会看到有关正在设置的颜色的消息；但他们并没有延迟两秒。我是否误解了 settimeout() 的工作原理，或者这与我使用 onload 事件有关？
最佳答案
设置超时需要函数引用。您只需立即调用该函数即可。将其包装在匿名函数中，如下所示:
for (var i=0; i<colors.length; i++) {
setTimeout(function() {
setBackgroundColor(colors[i])
}, 2000)
}
另外，因为我喜欢它 - 您可以使用 ES6 lambda 语法缩短 show_colors 方法。
function show_colors() {
colors.forEach(color => setTimeout(() => setBackgroundColor(color), 2000));
}
关于javascript - 使用 settimeout 迭代某些函数无法按我的预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34516828/