Javascript 使用settimeout不'；I don’我没料到会这样_Javascript

Javascript 使用settimeout不'；I don’我没料到会这样

javascript

Javascript 使用settimeout不'；I don’我没料到会这样,javascript,Javascript,我在玩javascript，并试图迭代数组中定义的一些颜色，以确保键入的颜色名称正确。我使用了以下代码： <body onload="show_colors()"> <script> var colors = ["blue", "cyan", "bisque", "gray", "green", "magenta", "orange", "red", "aqua", "yellow", "azure", "cadetblue", "plum"].sort()

我在玩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>


var colors=[“蓝色”、“青色”、“浅色”、“灰色”、“绿色”、“洋红”、“橙色”、“红色”、“水绿色”、“黄色”、“蔚蓝”、“卡德蓝”、“李子色”]。排序（）；
var myBody=document.getElementsByTagName（“body”）[0]；
函数show_colors（）{
for（var i=0；iSet timeout需要函数引用。您只需立即调用函数。将其封装在匿名函数中，如下所示：
for (var i=0; i<colors.length; i++) {
    setTimeout(function() { 
        setBackgroundColor(colors[i])
    }, 2000)
}

几点
如前所述，传递要执行的函数
函数需要显示下一种颜色，而不使用循环计数器的最后一个值。一种方法是将颜色保留在函数范围内
设置所有计时器调用需要将颜色隔开。此时，它们都在两秒钟后执行。您可能只会看到最后一种颜色
例如

var colors=[“蓝色”、“青色”、“浅色”、“灰色”、“绿色”、“洋红”、“橙色”、“红色”、“水绿色”、“黄色”、“蔚蓝”、“卡德蓝”、“李子色”]。排序（）；
函数toSetBackground（color）{//1。返回值是一个函数
返回函数（）{//2。要使用的颜色在函数范围内
console.log（'将颜色设置为'+color'）；
document.body.style.background=颜色；
};
}
函数show_colors（）{
对于（var i=0；ielement.style.background
不是属性。可能您正在查找element.style.backgroundColor
？@AndrueAnderson，background
是元素的style
属性的有效属性。它引用CSS背景style@PatrickEvans从他的密码来看，他似乎在寻找一个更改他的背景颜色。@Andrue Anderson，他是，但background
包含其他背景-*样式，因此您可以将各种背景样式放在其中，也可以直接设置其中一种背景-*样式work@PatrickEvans-您能提供的任何参考资料表明应该这样使用吗？或您可以只使用bind（）
方法-setTimeout（setBackgroundColor.bind（这个，colors[i]），2000*i）
尽管我确实认为ES6语法更漂亮@sterling，但您将遇到第一个代码的问题，因为回调中的i将成为循环中的最后一个值
function show_colors() {
    colors.forEach(color => setTimeout(() => setBackgroundColor(color), 2000));
}

<script>
var colors = ["blue", "cyan", "bisque", "gray", "green", "magenta", "orange", "red", "aqua", "yellow", "azure", "cadetblue", "plum"].sort();

function toSetBackground(color) { // 1. return value is a function
    return function() {           // 2. color to use is in function scope
        console.log('setting color to ' + color);
        document.body.style.background = color;
    };
}


function show_colors() {
    for (var i=0; i<colors.  length; i++) {
        setTimeout(toSetBackground(colors[i]), 2000 * i); // 3. space the callbacks
    }
}

window.addEventListener("load", show_colors);
</script>