Question

我创建了下一个代码：

  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秒钟后将样式应用于第二个点，依此类推。谁有解决方案？

Answer 1

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

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，以了解如何在i循环中处理for。

如果我们使用的是ES2015，则最好使用for-of循环：

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

这取决于NodeList中的querySelectorAll是可迭代的，它在现代浏览器中是可迭代的。我不知道是否有使用ES2015的浏览器，但还没有使NodeList变得可迭代；如果有的话，您可以使用this answer's technique来增加可迭代性。

Answer 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>

Answer 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);

Answer 4

您可以尝试使用很长的路： setTimeout（function（）{ 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）

Answer 5

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

#:import utils kivy.utils


<MyGrid>:
    canvas.before:
        Color:
            rgba: utils.get_color_from_hex('#a1d0f4')
        Rectangle:
            pos: self.pos
            size: self.size

    GridLayout:
        cols: 1
        size: root.width, root.height
        Label:
            text: 'logo here'
        GridLayout:
            cols: 2
            Label:
                text: ' vision logo goes here'
            GridLayout:
                cols:1
                Button:
                    size: 700, 120
                    size_hint: None, None # <---
                    background_color: utils.get_color_from_hex('#0a74c4')
                    font_name: 'fonts/Shoroq-Font.ttf'
                    text: root.bidi_text
                    font_size: sp(20)

                    Image:
                        source: 'images/conference-256.png'
                        y: self.parent.y + 5
                        x: self.parent.x + 70



                Button:
                    text:'button'
                    background_color: utils.get_color_from_hex('#0a74c4')
                Button:
                    text:'button'
                    background_color: utils.get_color_from_hex('#0a74c4')
                Button:
                    text:'button'
                    background_color: utils.get_color_from_hex('#0a74c4')
        GridLayout:
            cols: 3
            Button:
                text: 'button'
                background_color: utils.get_color_from_hex('#ff0000')
            Button:
                text: 'button'
                background_color: utils.get_color_from_hex('#0a74c4')
            Label:
                text: 'some text here'

使用setTimeout（）应用样式

5 个答案: