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

当我运行此代码时，它似乎只运行一次然后停止。有没有办法可以不断循环这些元素，因此元素会随机设置时间单独变化？

感谢任何帮助或建议。提前谢谢。

EDIT;

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元素。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

随机setInterval

2 个答案: