2

I am creating a page that I ultimately want to loop through each element with the ".binary" class.

Each element will change it's text value on a random setInterval time between 200-1000. At the moment I have:

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

When I run this code it only seems to run once then stops. Is there a way I can constantly loop these individually, so the elements individually change at a random set time?

Any help or advice is appreciated. Thank you in advance.

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>
wscourge
  • 10,657
  • 14
  • 59
  • 80
daniel aagentah
  • 1,672
  • 5
  • 29
  • 56

2 Answers2

2

The issue is your use of a loop. The combination of this code and that in your previous (now deleted) question, means that you're stacking up thousands of timers per second, hence the browser locks up. Also note that within the scope of the setTimeout() function, this will be the window, not the .binary element.

To fix this you could store the index of the current element in a variable and increment that after the expiration of each timer. Something like this:

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?

In this case you just need to remove the references to index and the eq() method call:

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>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • jheeze, you took the fun out of it, this is exactly what I was looking for! muchas gracias! – daniel aagentah Nov 14 '16 at 13:04
  • 1
    No problemo! Glad to help – Rory McCrossan Nov 14 '16 at 13:11
  • If I wanted to apply this function to all the binary numbers at the same time, how would I do this? I ask because say if I have 500 divs with the binary class, it takes them all some time to each start changing. What would be the best way for me to have them all changing instantly? – daniel aagentah Nov 14 '16 at 13:32
  • In that case you don't need `index` or `eq()`. I updated the answer for you. – Rory McCrossan Nov 14 '16 at 13:34
  • ahh I see, that's cool, the numbers seem to change at the same time now rather than at random intervals? Could this be done easily? thanks for the help – daniel aagentah Nov 14 '16 at 13:36
  • Well they all change at the same time as that's what you asked for. The interval between all 4 values changing is random. – Rory McCrossan Nov 14 '16 at 13:37
  • ahhh sorry I may have mis-communicated, if you see the EDIT on my answer, the functionality only seems to apply to each div one after the other, what I'd like to do is have all the divs instantly randomly changing on page load, rather than them all running in a chain (if that makes sense) – daniel aagentah Nov 14 '16 at 13:43
  • Right - and that's what the edit to my question does...? – Rory McCrossan Nov 14 '16 at 13:43
  • aye, only they all seem to change in sync with each other, rather than each div changing on a random interval time, I'll figure it, I'm probably not making sense at this point. thank you anyway you've probably helped me more than you should have anyway! thank you for your assistance! – daniel aagentah Nov 14 '16 at 13:45
1

Replace if (this.innerText == 0) with if (obj.innerText == 0) .

wscourge
  • 10,657
  • 14
  • 59
  • 80