Задержка между циклами с использованием 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>