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

Question

我正在尝试使用以下代码慢慢增加背景的颜色：<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.log(i) 时，它似乎没有正确迭代。我希望它在每次迭代时暂停。我该怎么做呢？

Answer 1

您可以通过乘以延迟来解决此问题，例如i：setTimeout

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")

for (let i = 0; i < 255; i++) {

  setTimeout(function() {

    //var randomColor = Math.floor(Math.random() * 12777215).toString(16);

    container.style.background = `rgb(${i} , ${i}, ${i})`

    

  }, 1000 * i);

}

<div class="container" style="width:100px;height:100px"></div>

演示（从黑色到白色）：

let container = document.querySelector(".container")

let container2 = document.querySelector(".container2")

for (let i = 0; i < 256; i++) {

  setTimeout(function() {

    container.style.background = `rgb(${i} , ${i}, ${i})`

    container2.textContent = `rgb(${i} , ${i}, ${i})`

  }, 50 * i);

}

<div class="container" style="width:200px;height:100px"></div>

<div class="container2" style="width:200px;height:100px"></div>

Answer 2

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>