Question

我正在尝试找到一种方法将div一次附加到一个容器中。我不想附加所有的div并让它们一次淡入一个。以下代码无效。如果没有for循环，它会一次附加一个。我尝试使用for循环来限制div顺序追加的次数，但每秒输出4个div。我希望它每秒输出一次div，四次。

-(IBAction)Button1Colour:(id)sender{

if (_Button1.backgroundColor == nil) {
    _Button1.backgroundColor = [UIColor colorWithRed:(216/255.f) green:(146/255.f) blue:(48/255.f) alpha:0.3];}

else if (_Button1.backgroundColor == [UIColor colorWithRed:(216/255.f) green:(146/255.f) blue:(48/255.f) alpha:0.3]) {
    _Button1.backgroundColor = [UIColor colorWithRed:(33/255.f) green:(141/255.f) blue:(8/255.f) alpha:0.3];}

else (_Button1.backgroundColor = nil);}

的CSS：

for(var i = 0;i < 4; i++){
        setInterval(function(){
            $(".output").append("<div class='odiv'>TEST</div>")
        },1000)
 }

HTML：

.odiv{
        display: inline-block;
}

Answer 1

使用超时而不是时间间隔作为当前迭代索引1000 * i的函数：

＆＃13;

for (var i = 0; i < 4; i++) {
    setTimeout(function () {
        $(".output").append("<div class='odiv'>TEST</div>")
    }, 1000 * i);
}

＆＃13;

.odiv {
    display: inline-block;
    padding: 5px;
    background: #EEE;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>

＆＃13;

Answer 2

使用计数器清除间隔：

var i = 0;
var myInterval = setInterval(function() {
    if (i === 4) return clearInterval(myInterval);
    $(".output").append("<div class='odiv'>TEST</div>");
    i++;
},1000);

Answer 3

您当前的代码每秒运行$('.output').append()四次。以下是您当前代码正在执行的操作的细分：

- Start a loop for 0,1,2,3
--- Loop 0
    Append a div to `.output` every 1000 milliseconds.
--- Loop 1
    Append a div to `.output` every 1000 milliseconds.
--- Loop 2
    Append a div to `.output` every 1000 milliseconds.
--- Loop 3
    Append a div to `.output` every 1000 milliseconds.

结果是每1000毫秒附加.odiv元素的4个间隔。

您希望每1000毫秒附加一个.odiv元素，持续4秒。为此，创建一个函数，每隔1000毫秒附加一个div，并在第4次迭代后停止它。

var i = 0;
var appendDiv = setInterval(function() {
  if (i === 4) {
    // Stop the setInterval function from running
    clearInterval(appendDiv);
  } else (
    $(".output").append("<div class='odiv'>TEST</div>")
  )

  // Increase the counter
  i++
}, 1000)

这是一个有效的jsFiddle。

你如何每秒向一个容器添加一个div？

3 个答案: