javascript - 根据耗时更新变量

我目前有以下代码:

<div id="resource1"></div>
<div id="resource2"></div>
<div id="resource3"></div>


<script>

var resource1 = 50;
var resource2 = 50;
var resource3 = 50;

var modifier = 3;

function resourcesupdates() {
    setInterval(function() {
            resource1 = resource1 + modifier;
            resource2 = resource2 + modifier;
            resource3 = resource3 + modifier;
            document.getElementById('resource1').innerText = resource1;
            document.getElementById('resource2').innerText = resource2;
            document.getElementById('resource3').innerText = resource3;

            console.log(resource1);

     }, 1000);
}

resourcesupdates();
</script>

该代码之所以有效，是因为每秒每秒都会更新3个资源。

如果我想让它以每分钟47个的速度更新怎么办，但是我希望它仅在资源以整数更新时才输出给用户，而不是每秒更新一次，否则会导致十进制值？

最佳答案

正如我在上面的评论中所述:问题是，当以每秒47/60的速度更新时，您可能永远都不会到达该数字没有小数位的位置。如果始终将数字四舍五入以使其仍然满足您的要求，则可以采用以下解决方案:

var resource1 = 50;
var resource2 = 50;
var resource3 = 50;

var modifier = 47; // per minute

function resourcesupdates() {
    setInterval(function() {
            resource1 = resource1 + modifier/60;
            resource2 = resource2 + modifier/60;
            resource3 = resource3 + modifier/60;

            document.getElementById('resource1').innerText = Math.round(resource1);
            document.getElementById('resource2').innerText = Math.round(resource2);
            document.getElementById('resource3').innerText = Math.round(resource3);
     }, 1000);
}

resourcesupdates();

<div id="resource1"></div>
<div id="resource2"></div>
<div id="resource3"></div>

如果您希望按照对其他问题的评论中的要求始终舍入，只需将Math.round()替换为Math.floor()即可。

关于javascript - 根据耗时更新变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47138816/