使用 javascript 或 jquery 用于多数计数器的循环之间的延迟

Question

我一直在尝试使用 javascript 和 jquery 创建一个数字计数器。我想要 2 个计数器，其中一个依赖于另一个。我希望计数器从 0-2000 递增，递增间隔为 100 毫秒。每当一个计数器达到 200 的倍数（num=200 或 num=400 或 num=600...）时，另一个计数器递增 1。预期的结果是一个计数器从 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 问题..

Answer 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>

Answer 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 毫秒。您可以根据您的要求进行更改。

使用 javascript 或 jquery 用于多数计数器的循环之间的延迟

Delay between a loop using javascript or jquery for a multiple number counter

javascript

jquery

html

counter

odometer