There is such a script for getting three random numbers and constantly updating them:

var random = 1000; $('.qqq').each(function () { var element = $(this); setInterval(function () { random = randomizator(60000, 200000); }, 1000); setInterval(function () { showRandom(random, element); }, random); }) function randomizator(a, b) { return Math.floor(Math.random() * b) + a; } function showRandom(random, element) { element.text(random); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test" class="qqq"></div> <div id="test2" class="qqq"></div> <div id="test3" class="qqq"></div>

and it works great. But as soon as I reduce the range of values, I immediately start displaying the same values ​​in all three: 1 1 1 , 4 4 4 , etc.

I need the numbers to be all different, not three identical. Help, please, to understand the novice developer.

  • If the answer helped you - you need to mark it with such a green check mark. - Pavel Mayorov

1 answer 1

It is not necessary to run many timers - one for each item found. They can run away and then glitches begin with the fact that the wrong element gets the value set in your common random variable.

One timer is enough, and update the entire clip of elements.

Updated code version for several independent timers. The f-I update() parameter receives a set of elements in which it must update values ​​to random ones:

 var $el1 = $('.class-1'); var $el2 = $('.class-2'); var a = 1E2, b = 1E3; // случайные от и до function update( $el) { for( var i=0; i<$el.length; i++) { $( $el[i]).text( a + Math.floor( Math.random() * (b - a))); } } setInterval( function(){ update( $el1);}, 800); setInterval( function(){ update( $el2);}, 1200); 
 body { font-family:Helvetica,Arial,sans-serif;} div {margin:2px; width: 100px; text-align:center;} .class-1 { background-color: #FCA } .class-2 { background-color: #CAF } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="class-1"></div> <div class="class-1"></div> <div class="class-1"></div> <div class="class-2"></div> <div class="class-2"></div> <div class="class-2"></div>

  • That's right to the point! thank! - Henrry Kavel pm
  • But could you tell me how to do that for the following, let's say 5 numbers, the interval was different? (well, that is, here is the first line that goes with this script) and the second one needs to be allowed every hour. Do I just need to change the class? - Henrry Kavel
  • Another class; a new separate variable like now els sampled by this other class; and a copy of the update() function using this new variable. And another value in setInterval() for this copy is update() . It is a bit “crutch”, it is necessary to make it more beautiful / more correct, since several independent timers are required. But this is a separate question) - Sergiks
  • and if it’s not difficult, could you give an example of js for the new class in order to fully understand which elements change, even if it is “crutch”) - Henrry Kavel
  • And in general, is it possible that when updating the page with a random one, it would not work. and the numbers would be generated only in the specified imim interatval? - Henrry Kavel