JavaScript实现变量在0~2区间持续波动，现有代码仅返回1如何修复？

问题原因 #

• console.log(z) 是同步执行的，只会在代码初始化时运行一次，此时setInterval的回调还没被触发，所以永远只会打印初始值1
• 浮点数精度问题：0.1是二进制无法精确表示的小数，累加多次后会出现1.9000000000000001、2.0000000000000004这类精度误差，用z == 2和z == 0的全等判断永远无法触发边界反转逻辑
• 下限反转逻辑错误：触达0时count *= +1相当于什么都没做，如果当前count是负数，z会继续往负数方向递减，不会触发递增
• canvas-sketch框架本身提供了基于动画帧的时间控制逻辑，用setInterval容易和框架的渲染节奏不同步，出现掉帧

修复方案 #

通用JS修复代码 #

let z = 1;
// 步长带正负控制方向，初始是递增
let step = 0.1;

setInterval(function(){
  // 用大于等于、小于等于判断规避浮点数精度问题
  if(z >= 2) {
    step = -0.1;
    // 直接把z重置到边界，避免精度导致的越界
    z = 2;
  }
  if(z <= 0) {
    step = 0.1;
    z = 0;
  }
  z += step;
  // 把log放到回调里才能每次更新后打印最新值
  console.log(z);
}, 1000);

适配canvas-sketch的写法（更符合框架规范） #

const canvasSketch = require('canvas-sketch');

const settings = {
  duration: Infinity,
  fps: 60
};

const sketch = () => {
  let z = 1;
  let step = 0.1;
  // 控制每秒更新一次，和原setInterval节奏一致
  let lastUpdateTime = 0;

  return ({ context, width, height, time }) => {
    // 每秒更新一次z的值
    if (time - lastUpdateTime >= 1) {
      if(z >= 2) {
        step = -0.1;
        z = 2;
      }
      if(z <= 0) {
        step = 0.1;
        z = 0;
      }
      z += step;
      console.log(z);
      lastUpdateTime = time;
    }

    // 此处补充自定义渲染逻辑
    context.fillStyle = 'white';
    context.fillRect(0, 0, width, height);
  };
};

canvasSketch(sketch, settings);

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