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>

var-resource1=50；
var-resource2=50；
var-resource3=50；
var修饰符=3；
函数resourcesupdates（）{
setInterval（函数（）{
resource1=resource1+修饰语；
resource2=resource2+修饰语；
resource3=resource3+修饰语；
document.getElementById（'resource1'）。innerText=resource1；
document.getElementById（'resource2'）。innerText=resource2；
document.getElementById（'resource3'）。innerText=resource3；
console.log（resource1）；
}, 1000);
}
resourcesupdates（）；

这段代码之所以有效，是因为每秒钟都会以每秒3次的速度更新资源

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

更新的答案

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


<script>

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

var modifier = 47/60;


function resourcesupdates() {
    document.getElementById('resource1').innerText = resource1;
    document.getElementById('resource2').innerText = resource2;
    document.getElementById('resource3').innerText = resource3;
    setInterval(function() {
            resource1 = resource1 + modifier;
            resource2 = resource2 + modifier;
            resource3 = resource3 + modifier;
            if (Number.isInteger(resource1) ) {
                document.getElementById('resource1').innerText = resource1;
            }
            if (Number.isInteger(resource2) ) {
                document.getElementById('resource2').innerText = resource2;
            }
            if (Number.isInteger(resource3) ) {
              document.getElementById('resource3').innerText = resource3;
                        }
            console.log(resource1);

     }, 1000);
}

resourcesupdates()
</script>

var-resource1=50；
var-resource2=50；
var-resource3=50；
var修饰符=47/60；
函数resourcesupdates（）{
document.getElementById（'resource1'）。innerText=resource1；
document.getElementById（'resource2'）。innerText=resource2；
document.getElementById（'resource3'）。innerText=resource3；
setInterval（函数（）{
resource1=resource1+修饰语；
resource2=resource2+修饰语；
resource3=resource3+修饰语；
if（编号isInteger（资源1））{
document.getElementById（'resource1'）。innerText=resource1；
}
if（编号：isInteger（资源2））{
document.getElementById（'resource2'）。innerText=resource2；
}
if（编号：isInteger（资源3））{
document.getElementById（'resource3'）。innerText=resource3；
}
console.log（resource1）；
}, 1000);
}
资源支持日期（）

以下是JSFIDLE：

---

只是还没有看到它更新了一个整数…

正如我在上面的评论中所说：问题是，当以每秒47/60的速度更新时，你可能永远不会达到一个数字没有小数点的点。如果数字始终四舍五入显示时仍满足您的要求，则这可能是您的解决方案：

var-resource1=50；
var-resource2=50；
var-resource3=50；
变量修饰符=47；//每分钟
函数resourcesupdates（）{
setInterval（函数（）{
resource1=resource1+modifier/60；
resource2=resource2+修饰语/60；
resource3=resource3+修饰语/60；
document.getElementById（'resource1'）.innerText=Math.round（resource1）；
document.getElementById（'resource2'）.innerText=Math.round（resource2）；
document.getElementById（'resource3'）.innerText=Math.round（resource3）；
}, 1000);
}
resourcesupdates（）

我想让它在每次资源值更改一个整数时更新，而不是每60秒更新一次。如果我想让值在显示时向下舍入，那该怎么办呢。例如，值为15.7，但它继续显示15，直到达到16（如16.1），然后仅显示16。你明白我的意思吗？是的，我更新的JSFIDLE最终与公认的答案几乎相同：没问题！问题是，当以每秒47/60的速度更新时，可能永远不会达到数字没有小数点的程度。始终只显示整数是否符合您的要求？太好了，这正是我想要的！很高兴听到！根据您对另一个答案的评论，刚刚更新了问题以显示您需要执行的操作。有没有方法将显示更新为每秒一次，而不是每47/6000一次？但您明确要求仅当资源更新为整数时才进行更新，而不是每秒钟一次？很乐意帮助！）