setTimeout结束后如何填充元素?

Question

我正在制作一个"升序数字";效果与货币。页面加载，然后一个极快的计数从0.00开始到一个由API给出的十进制数。我在for循环中使用了setTimeout。在此之前一切正常，但是当for循环结束时，小数点后的数字是00。如果API返回$7000.50，则HTML中的最终结果为$7000.00。我试图用实际的API值改变innerHTML元素，但它是在for循环之前执行的，即使我做一个。then()或回调。

JS:

function getTotalIncome() {
fetch('/Invoices/GetProviderTotalIncome')
.then(res => res.json())
.then(function (data){
for (let i = 0.0; i <= data; i++) {
setTimeout(function () {
document.getElementById('totalIncome').innerHTML = i.toFixed(2)
}, 50)
}
document.getElementById('totalIncome').innerHTML = data.toFixed(2) //Why this is called before the for loop?
})
}

HTML:

<h4 class="text-center">Total Invoices Value:
<b>$<span id="totalIncome"></span></b>
</h4>

Answer 1

一种解决方案可能是将最后一行放在for循环中，并在最后一次迭代时执行:

function getTotalIncome() {
fetch('/Invoices/GetProviderTotalIncome')
.then(res => res.json())
.then(function (data){
for (let i = 0.0; i <= data; i++) {
setTimeout(function () {
document.getElementById('totalIncome').innerHTML =      i.toFixed(2)
// this will execute on final iteration, when for loop ends
if(i == data ){
document.getElementById('totalIncome').innerHTML       = data.toFixed(2)
}
}, 50)
}
})
}

这会导致它在for循环之后执行。