使用setInterval函数[duplicate]时，十进制数增长失控

Question

我想使用setInterval将一个数字增加0.1/s，我还想将此函数多次应用于该数字（单击一次，0.1/s，单击两次，0.2/s等）。然而，当我执行这个函数时，这个数字会增加到3.00000001而不是3，或者7.999999999而不是8。我该怎么解决这个问题？

let btn = document.querySelector(".button");
let num = document.getElementById("number");
let increment = 0;

function toAdd() {
  setInterval(() => {
    num.innerHTML = parseFloat(num.innerHTML) + increment;
  }, 1000)
}

btn.addEventListener("click", toAdd, increment += 0.1);

<span id="number">0</span>
<button class="button">Click to Add</button>

Answer 1

每次单击时，您都设置了一个新的setInterval.也可以按照建议使用toFig（），但您需要使用if语句来防止多个setInterval

let btn = document.querySelector(".button");
let num = document.getElementById("number");
let increment = 0;
function toAdd() {
increment+=.1

if (increment == .1){
  setInterval(() => {
    num.innerHTML =parseFloat(parseInt((parseFloat(num.innerHTML)+.05+increment)*10)/10);
    
    
  }, 1000)} else num.innerHTML =parseFloat(parseInt((parseFloat(num.innerHTML)+.05+increment)*10)/10);
}

btn.addEventListener("click", toAdd);

html lang-html prettyprint-override"><span id="number">0</span>
<button class="button">
Click to Add
</button>