JavaScript定时器递减0.1出现多余小数的原因及解决方法

问题原因 #

这个问题我之前也碰到过，本质是JavaScript里**双精度浮点数（IEEE 754标准）**的固有特性导致的。我们日常用的十进制小数0.1，在二进制里是一个无限循环的小数（类似十进制里的1/3=0.333...），而JavaScript的Number类型只能用有限的二进制位存储数值，所以实际存的是0.1的近似值。

每次执行timeleft -= 0.1时，都是用这个近似值做减法，多次操作后，微小的误差会逐渐累积，最终就出现了13.700000000000001这种看起来不符合预期的结果。

修复方案 #

有几种简单可靠的方法可以解决这个问题，你可以根据场景选择：

方案1：用整数代替浮点数计算（推荐）

把时间单位换成更小的整数单位（比如以0.1秒为1个单位），这样所有计算都是整数操作，完全规避浮点数误差，最后显示时再转成小数：

function timerStart(){ 
  let timeleft = 140; // 14秒 = 140个0.1秒单位
  timer = setInterval(function(){ 
    timeleft -= 1; 
    console.log(timeleft / 10); // 转成小数显示
    // 可选：到0后停止定时器
    if(timeleft <= 0) clearInterval(timer);
  }, 100) 
}; 
timerStart();

这种方法是处理时间、金额这类数值的常用技巧，完全不会有精度问题，非常可靠。

方案2：每次计算后修正精度

如果一定要用浮点数，可以在每次减法后用toFixed()或Math.round()来保留一位小数，截断累积的误差：

function timerStart(){ 
  let timeleft = 14; 
  timer = setInterval(function(){ 
    // 保留1位小数并转成数字（toFixed返回的是字符串）
    timeleft = Number((timeleft - 0.1).toFixed(1)); 
    console.log(timeleft); 
  }, 100) 
}; 
timerStart();

你也可以用Math.round实现类似效果：timeleft = Math.round((timeleft - 0.1) * 10) / 10，原理是先放大10倍转成整数取整，再缩小回原单位，同样能消除精度误差。

方案3：高精度数值库（复杂场景）

如果是涉及大量复杂数值计算的场景，可以使用decimal.js这类专门处理高精度十进制数的库，但对于这个定时器场景来说，前面两种方法已经足够，没必要引入额外依赖。

内容的提问来源于stack exchange，提问作者foxer