具有随机 setInterval 的 each() 循环

Question

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

每个元素都会在 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

问题在于您使用了循环。此代码与您之前（现已删除）问题中的代码相结合，意味着您每秒堆叠数千个计时器，因此浏览器锁定。另请注意，在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>

如果我想同时将此函数应用于所有二进制数，我该怎么做？

在这种情况下，您只需删除对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>

Answer 2

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