Question

我有以下变量JS：

$(document).ready(function () {
    var total = 15.5,
        value = 0,
        elem = $('div');

    var interval = setInterval(function () {
        elem.text(value.toFixed(1) + '$');

        if (value >= total) {
            clearInterval(interval);
        }
        value = value + 0.1;
    }, 5);
});

两个问题：

结果数字是15.6为什么？
如何使增量从0到目标值花费相同的时间？（0到25从0到250同时花费）

Answer 1

您忘记退出功能。此外，您应该在检查总数后更新节点的文本。

if (value >= total) {
    return clearInterval(interval);
}
elem.text(value.toFixed(1) + '$');

小提琴http://jsfiddle.net/Lqxsh39q/

要解决第二个问题，您可以在设置之前预先计算每个间隔的持续时间。并像setInterval中的第二个参数一样使用它。像duration = 1000 / (total * 10);或任何您想要的公式。

小提琴：http://jsfiddle.net/Lqxsh39q/1/

Answer 2

@Glen Swift的回答是正确的，但我必须指出你的原始代码：

您得到的结果数字为15.6，因为：如果您认为结果是15.5，那么实际得到15.4999999，小于15.5，因此即使您认为它是真的，if条件也是假的。所以它再次递增，最终结果为15.6。

就第二部分而言，要获得相同的时间，您需要为每次添加而不是固定的0.1执行相同数量的步骤。我们假设您希望每次都以100个步骤达到目标，您可以将总间隔除以100，然后在当前编写0.1的代码中替换它。

最终代码应如下所示：

 $(document).ready(function () {
        var total = 15.5,
            value = 0,
            ment=(total-value)/100,
            elem = $('div');

        var interval = setInterval(function () {
            if (value >= total) {
           return clearInterval(interval);
}
elem.text(value.toFixed(1) + '$');
            value = value + ment;
        }, 5);
    });

See the fiddle here

Answer 3

您现有的代码：

var interval = setInterval(function () {
        elem.text(value.toFixed(1) + '$');

        if (value >= total) {
            clearInterval(interval);
        }
        value = value + 0.1;
    }, 5);

应首先检查＆gt; =总条件。如果条件失败则退出该函数。

但是你在检查前修改了文本元素。因此你的错误。

这样做。

var interval = setInterval(function () {
    value = value + 0.1;
    if (value <= total) {
        elem.text(value.toFixed(1) + '$');
    } else {
        clearInterval(interval);
    }
}, 5);

Javascript十进制增量？

3 个答案: