使用 setTimeout() 应用样式答案

【问题标题】：Apply style with setTimeout()使用 setTimeout() 应用样式
【发布时间】：2019-05-29 02:38:11
【问题描述】：

我创建了下一个代码：

  setTimeout(function () {
        var dot = document.querySelectorAll('.dot');
        for (var i=0;i<dot.length;i++) {
            dot[i].style.backgroundColor = 'blue';
        }
    },2000);

 .container{
        display: flex;
        justify-content: space-around;
    }
   .dot{
       background-color: red;
       width: 20px;
       height: 20px;
       border-radius: 50%;
   }

<div class="container">
<div  class="dot"></div>
<div class="dot" ></div>
<div class="dot" ></div>
</div>

此代码在 2 秒后同时为每个点应用背景颜色，但我想分别为每个点应用样式。例如：2 秒后应用第一个点的样式，然后 2 秒后应用第二个点的样式，依此类推。谁有解决方案？

【问题讨论】：

你可以使用 setInterval

标签： javascript

【解决方案1】：

简单的方法是创建单独的计时器，通过乘以循环索引，使每个等待2000ms 比上一个长：

var dot = document.querySelectorAll('.dot');
for (let i=0;i<dot.length;i++) { // ***
    setTimeout(function () {
        dot[i].style.backgroundColor = 'blue';
    }, i * 2000);
}

还要注意在循环中使用let 而不是var，以便每次循环迭代都有自己的i 副本。如果不能使用 ES2015 特性，请参阅this question's answers 了解如何在for 循环中处理i。

如果我们使用 ES2015，我们不妨使用 for-of 循环代替：

let i = 0;
for (const dot of document.querySelectorAll('.dot')) {
    setTimeout(() => {
        dot.style.backgroundColor = 'blue';
    }, i++ * 2000);
}

这依赖于来自querySelectorAll 的NodeList 是可迭代的，它在现代浏览器上。我不知道是否有任何带有 ES2015 的浏览器，但它们（尚未）使 NodeList 可迭代；如果有的话，你可以使用this answer's technique 来增加可迭代性。

【讨论】：

【解决方案2】：

将 setTimeout 放在 for 循环中，将 i 与 2000 相乘以设置不同的时间间隔

var dot = document.querySelectorAll('.dot');
for (let i = 0; i < dot.length; i++) {
  setTimeout(function() {
    dot[i].style.backgroundColor = 'blue';
  }, i * 2000);

}

.container {
  display: flex;
  justify-content: space-around;
}

.dot {
  background-color: red;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

<div class="container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

【讨论】：

【解决方案3】：

  var i = 0;
  var dot = document.querySelectorAll('.dot');
  var interval = setInterval(function () {
    dot[i].style.backgroundColor = 'blue';
    i++;
    if (i >= dot.length) clearInterval(interval);
  },2000);

【讨论】：

【解决方案4】：

您可以尝试使用 long way：``` 设置超时（函数（）{ var dot = document.querySelectorAll('.dot');

    setTimeout(function () {
        for (var i=0;i<dot.length;i++) {
        dot[0].style.backgroundColor = 'blue';
        }

        setTimeout(function () {
            for (var i=0;i<dot.length;i++) {
            dot[1].style.backgroundColor = 'blue';
            }
        },2000);

    },2000);
},2000);    
</script>```

但我建议 (i * 2000)

【讨论】：

【解决方案5】：

尝试使用 setInterval，似乎非常适合您的情况。

    var dotNumber = 0;
    var myVar = setInterval(() => {
        var dot = document.querySelectorAll('.dot');
        dot[dotNumber].style.backgroundColor = 'blue';

        dotNumber +=1; 

        if (dotNumber >= dot.length){
           clearInterval(myVar);
        }  
     }, 2000);

【讨论】：