Javascript 使用函数缓慢增加背景色的数量

我试图用以下代码慢慢增加背景的颜色：

<script type="text/javascript">
        let container = document.querySelector(".container")
        for(let i = 0 ; i<50; i++) {
            setTimeout(function() {
                container.style.background = `rgb(${i} , ${i}, ${i})`},
                1000);
            }
</script>

---

我不知道为什么它不起作用。当我使用console.logi时，它似乎没有正确地迭代。我希望每次迭代都暂停。如何执行此操作？

设置超时是异步的

<script type="text/javascript">
    let container = document.querySelector(".container")
    let i = 0;
    function nextTimeout(){
      setTimeout(function() {
            container.style.background = `rgb(${i} , ${i}, ${i})`;
            i++;
            if(i<50){
              console.log('next');
              nextTimeout()
            }
          },
      1000);

    }
    nextTimeout();                 
</script>

---

setTimeout是异步的

<script type="text/javascript">
    let container = document.querySelector(".container")
    let i = 0;
    function nextTimeout(){
      setTimeout(function() {
            container.style.background = `rgb(${i} , ${i}, ${i})`;
            i++;
            if(i<50){
              console.log('next');
              nextTimeout()
            }
          },
      1000);

    }
    nextTimeout();                 
</script>

---

您可以通过将i乘以setTimeout delay来解决此问题，如下所示：

for (let i = 0; i < 50; i++) {
   setTimeout(function() {
      container.style.background = `rgb(${i} , ${i}, ${i})`
   }, 1000 * i);  // <----- like this
}

演示：

let container=document.querySelector.container 对于let i=0；i<255；i++{ setTimeoutfunction{ //var randomColor=Math.floorMath.random*12777215.toString 16； container.style.background=`rgb${i}，${i}，${i}` }，1000*i； }

---

您可以通过将i乘以setTimeout delay来解决此问题，如下所示：

for (let i = 0; i < 50; i++) {
   setTimeout(function() {
      container.style.background = `rgb(${i} , ${i}, ${i})`
   }, 1000 * i);  // <----- like this
}

演示：

let container=document.querySelector.container 对于let i=0；i<255；i++{ setTimeoutfunction{ //var randomColor=Math.floorMath.random*12777215.toString 16； container.style.background=`rgb${i}，${i}，${i}` }，1000*i； }

---

您同时运行settimeout 50次。不是50次每次间隔1秒您同时运行settimeout 50次。不是50次，每次间隔1秒我想要的是循环从0到255，但即使从0到50，迭代也会从0到10到20到30到40到50。我不知道为什么。我希望迭代变成0，1，2，3，4，5，6，7，8，…255。抱歉，如果我的解释不清楚。我添加了一个新的演示。YOU可以看到div背景正在从rgb0、0、0更改为rgb255、255、255。如果需要，您可以将setTimeout delay从50增加到1000，但是用户很难注意到更改。我希望循环从0增加到255，但即使从0增加到50，迭代也会从0增加到10，从20增加到30，从40增加到50。我不知道为什么。我希望迭代变成0，1，2，3，4，5，6，7，8，…255。抱歉，如果我的解释不清楚。我添加了一个新的演示。YOU可以看到div背景正在从rgb0、0、0更改为rgb255、255、255。如果需要，您可以将setTimeout delay从50增加到1000，但是用户很难注意到更改。