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

Я пытался создать счетчик чисел, используя 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 ответа

Решение

С помощью 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 мс для этой демонстрации. Вы можете изменить его в соответствии с вашими требованиями.

Лучше всего использовать 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>

Другие вопросы по тегам