在启动另一个计数器之前，请确保某个计数器已完成计数

Question

我有下面的代码，它是两个计数器，一个计数器计数到30000，然后下一个计数器以不同的速度从那里计数到更高的数字。

我遇到的问题是，在第二个计数器开始之前，第一个计数器从未真正达到30000。我以为这就是完整参数的全部意义，但实际上它只是运行1秒，然后启动下一个计数器。但我需要它快速计数，这样我就不能改变持续时间。

如何确保第二个计数器只有在第一个计数器达到30000时才启动？

$({ Counter: 0 }).animate({
Counter: $('.Single').text()
}, {
duration: 1000,
easing: 'linear',
step: function() {
$('.Single').text(Math.ceil(this.Counter));
},
done: function() {
checker();
}
});
function checker() {
base = parseInt($(".Single").text());
per_day = 18;
newtarget = (base + per_day);
$(".Single").text(newtarget);
$({ Counter: base }).animate({
Counter: $('.Single').text()
}, {
duration: 20000,
easing: 'linear',
step: function() {
$('.Single').text(Math.ceil(this.Counter));
},
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">30000</span>

Answer 1

您的问题是step:不包括"最后一步"；。

如果你计算1..2..3，它看起来是两个步骤(从1开始(，但在动画方面，它实际上是一个步骤(1->2(，然后以done:(2->3(结束。

在done:回调中使用计数器更新UI，它可以正常工作(尽管20000计数器可能启动得太早，所以您可能需要在checker()上使用setTimeout(。

$('.Single').text(Math.ceil(this.Counter));

$({ Counter: 0 }).animate({
Counter: $('.Single').text()
}, {
duration: 1000,
easing: 'linear',
step: function() {
$('.Single').text(Math.ceil(this.Counter));
},
done: function() {
$('.Single').text(Math.ceil(this.Counter));
checker();
}
});
function checker() {
base = parseInt($(".Single").text());
per_day = 18;
newtarget = (base + per_day);
$(".Single").text(newtarget);
$({ Counter: base }).animate({
Counter: $('.Single').text()
}, {
duration: 20000,
easing: 'linear',
step: function() {
$('.Single').text(Math.ceil(this.Counter));
},
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">30000</span>