javascript - 在给定时间内从 n 到 0 倒计时，负结束值

Question

我正在编写一个简单的脚本，它应该通过倒数将给定值(例如 6345.23)动画化为 0，它也应该以 0 结束 如果指定的时间量已经过去(例如 2 秒。

我从简单的逻辑开始:

• 给定配置:初始值，时间(以秒为单位)，间隔
• 时间以秒为单位，因此请将其转换为毫秒
• 通过将以毫秒为单位的时间除以间隔来计算滴答数
• 通过将初始值除以报价数量来计算每报价减少的值(value)

一旦知道上面的内容，我们就可以简单地做:(简单的模型，而不是实际的代码)

intId = setInterval(function() {
    if(ticks_made === amount_of_ticks) {
        clearInterval(intId);
    } else {
        value -= amount_per_tick;
        // update view
    }
}, interval);

实际代码:

var value = 212.45,
    time = 2, // in seconds
    interval = 20; // in milliseconds

var time_to_ms = time * 1000,
    amount_of_ticks = time_to_ms / interval,
    amount_per_tick = (value / amount_of_ticks).toFixed(5);

var start_time = new Date();

var ticks_made = 0;

var intId = setInterval(function() {

    if(ticks_made === amount_of_ticks) {
        console.log('start time', start_time);
        console.log('end time', new Date());
        console.log('total ticks: ', amount_of_ticks, 'decresed by tick: ', amount_per_tick);
        clearInterval(intId);
    } else {
        value = (value - amount_per_tick).toFixed(5);
        console.log('running', ticks_made, value);
    }

    ticks_made++;

}, interval);

链接做fiddle (在控制台中你可以观察它是如何工作的)

如果您将时间设置为 2(2 秒)，它可以，但是如果您将时间设置为例如 2.55(2.55 秒)，它根本不会停止 0，它以负值无限期地过去和前进。

我如何修复它，以便无论在几秒钟内设置什么，它总是一个接一个地精确运行，直到完美地达到 0？

var value = 212.45,
	time = 2, // in seconds
	interval = 20; // in milliseconds

var time_to_ms = time * 1000,
	amount_of_ticks = time_to_ms / interval,
	amount_per_tick = (value / amount_of_ticks).toFixed(5);

var start_time = new Date();

var ticks_made = 0;

var intId = setInterval(function() {

	if(ticks_made === amount_of_ticks) {
		console.log('start time', start_time);
		console.log('end time', new Date());
		console.log('total ticks: ', amount_of_ticks, 'decresed by tick: ', amount_per_tick);
		clearInterval(intId);
	} else {
		value = (value - amount_per_tick).toFixed(5);
		console.log('running', ticks_made, value);
	}
	
	ticks_made++;

}, interval);

Answer 1

您依赖于 ticks_made === amount_of_ticks 是完全匹配。由于四舍五入，您可能无法获得完全匹配，因此您最好这样做:

if(ticks_made >= amount_of_ticks) {