each() 循环与随机 setInterval

Question

我正在创建一个页面，我最终想使用“.binary”遍历每个元素 class。

每个元素都会在 200-1000 之间的随机 setInterval 时间内更改其文本值。目前我有：

$(function () {
    $(".binary").each(function (i , obj) {
        setTimeout(function () {
            if (obj.innerText == 0) {
                obj.innerText = 1;
            } else {
                obj.innerText = 0;
            }
        }, 500);
    });
});

当我运行这段代码似乎只运行一次就停止了。有没有一种方法可以让我不断地单独循环这些元素，以便元素在随机设定的时间单独变化？

如有任何帮助或建议，我们将不胜感激。提前谢谢你。

编辑；

function flipValue(index) {
  setTimeout(function() {
    var $binary = $('.binary');
    $binary.eq(index % $binary.length).text(function(i, t) {
      return t == '1' ? '0' : '1';
    });
    flipValue(++index);
  }, Math.round(Math.random() * 800) + 200); // random between 200 - 1000
};

flipValue(0);

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

Answer 1

将if (this.innerText == 0)替换为if (obj.innerText == 0)。

Answer 2

问题是您使用了循环。此代码与您之前（现已删除）问题中的代码的组合意味着您每秒堆叠数千个计时器，因此浏览器会锁定。另请注意，在 setTimeout() 函数的范围内，this 将是 window，而不是 .binary 元素。

要解决这个问题，您可以将当前元素的索引存储在一个变量中，并在每个计时器到期后递增它。像这样：

function flipValue(index) {
  setTimeout(function() {
    var $binary = $('.binary');
    $binary.eq(index % $binary.length).text(function(i, t) {
      return t == '1' ? '0' : '1';
    });
    flipValue(++index);
  }, Math.round(Math.random() * 800) + 200); // random between 200 - 1000
};

flipValue(0);

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

If I wanted to apply this function to all the binary numbers at the same time, how would I do this?

在这种情况下，您只需删除对 index 和 eq() 方法调用的引用：

function flipValue() {
  setTimeout(function() {
    $('.binary').text(function(i, t) {
      return t == '1' ? '0' : '1';
    });
    flipValue();
  }, Math.round(Math.random() * 800) + 200); // random between 200 - 1000
};

flipValue();

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

each() 循环与随机 setInterval

each() loop with random setInterval

html

javascript

jquery

loops

setinterval