如何实现time值每10毫秒增减0.01直到目标值，而非瞬间跳转

问题原因 #

你当前代码里用同步的do...while循环修改time变量，JavaScript是单线程执行逻辑，同步循环会在瞬间完成所有累加/累减操作，不会在每一步更新后让出线程给UI渲染，所以你看不到逐步变化的过程，只能看到最终结果。同时你将点击事件绑定逻辑写在了if判断和animate函数内，会导致事件被重复绑定，逻辑执行异常。

修正方案 #

用定时器控制每次修改的间隔，每10ms执行一次增减操作，到达目标值后清除定时器终止更新即可，参考实现代码如下：

var time = 0;
var animateTimer = null; // 存储定时器ID，避免重复触发动画
var decreaseTarget = -0.78;
var increaseTarget = 0.78;

// 页面加载完成后仅绑定一次点击事件
window.onload = function() {
  // 点击but5执行递增逻辑
  document.getElementById("but5").onclick = function() {
    // 先清除已有定时器，避免多次点击触发多个并行动画
    if (animateTimer) clearInterval(animateTimer);
    animateTimer = setInterval(function() {
      if (time >= increaseTarget) {
        // 到达目标值，清除定时器终止动画
        clearInterval(animateTimer);
        animateTimer = null;
        return;
      }
      // 处理浮点数运算精度问题，避免出现0.0999999999这类异常值
      time = parseFloat((time + 0.01).toFixed(2));
      // 此处可添加你需要的time更新后的渲染逻辑，比如更新DOM显示
      console.log(time);
    }, 10)
  }

  // 点击but3执行递减逻辑
  document.getElementById("but3").onclick = function() {
    if (animateTimer) clearInterval(animateTimer);
    animateTimer = setInterval(function() {
      if (time <= decreaseTarget) {
        clearInterval(animateTimer);
        animateTimer = null;
        return;
      }
      time = parseFloat((time - 0.01).toFixed(2));
      // 此处可添加你需要的time更新后的渲染逻辑
      console.log(time);
    }, 10)
  }
}

补充说明 #

• setInterval可以固定间隔执行逻辑，每次仅修改一次time的值，修改完成后会让出线程执行UI渲染，就能看到数值逐步变化的效果
• 定时器ID的判断和清除逻辑，是为了避免多次点击按钮触发多个并行定时器，导致数值更新速度异常
• 浮点数精度处理是JS数值运算的通用优化，避免小数运算出现的精度偏差影响判断条件的执行结果

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