Задержка между циклами с использованием javascript или jquery для счетчика нескольких чисел - PullRequest
Новая
       43

Задержка между циклами с использованием javascript или jquery для счетчика нескольких чисел

0 голосов
/ 04 мая 2018

Я пытался создать счетчик чисел, используя javascript и jquery. Я хочу 2 счетчика, где один зависит от другого. Я хочу увеличить счетчик от 0 до 2000 с интервалом в 100 миллисекунд между приращениями. и всякий раз, когда один счетчик достигает кратного 200 (число = 200 или число = 400 или число = 600 ...), другой счетчик увеличивается на единицу. Ожидаемый результат - счетчик, идущий от 0 до 2000, а другой - от 0 до 10 за то же время.

Этот фрагмент кода, с которым мне не удалось получить результат:

HTML-код: 

<span id="counter" >0</span>
<span id="counter2" >0</span>

код JavaScript: 

function counting(){
     var cc=0;
     for(var c=0;c<2000;c++){
        if((c % 200) === 0){
         $('#counter2').text(cc+1);
        }
        else{
         setTimeout(function(){$('#counter').text(c);},100);           
        }  
     }
}

Пожалуйста, помогите мне с любым решением javascript или jquery ..

Ответы [ 2 ]

0 голосов
/ 04 мая 2018

Использование setInterval лучше подходит здесь. Кроме того, вы должны увеличить cc на 1 и сохранить его в cc. 

function counting() {
  var cc = 0,
    c = 1;

  var int = setInterval(function() {
    $('#counter').text(c);

    if (c % 200 === 0) {
      cc += 1;
      $('#counter2').text(cc);
    }

    if (c >= 2000) {
      clearInterval(int);
    }

    c += 1;
  }, 1);
}

counting();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="counter">0</span>
<span id="counter2">0</span>

Я изменил интервал до 1 мс для этой демонстрации. Вы можете изменить его в соответствии с вашими требованиями.

0 голосов
/ 04 мая 2018

Лучше всего использовать setInterval с условиями внутри функции интервала, за которыми следует clearInterval в конце. Нет необходимости в jQuery: 

const counter = document.querySelector('#counter');
const counter2 = document.querySelector('#counter2');

let count = 0;
const interval = setInterval(() => {
  count++;
  counter.textContent = count;
  if (count % 200 === 0) counter2.textContent = count / 200;
  if (count === 2000) clearInterval(interval);
}, 100);
<span id="counter" >0</span>
<span id="counter2" >0</span>

Ускоренная версия: 

const counter = document.querySelector('#counter');
const counter2 = document.querySelector('#counter2');

let count = 0;
const interval = setInterval(() => {
  count++;
  counter.textContent = count;
  if (count % 200 === 0) counter2.textContent = count / 200;
  if (count === 2000) clearInterval(interval);
}, 10);
<span id="counter" >0</span>
<span id="counter2" >0</span>
...