Canvas实现节点定时有限次数闪烁，解决异步无限调用问题

你遇到的无限输出问题核心原因有两个：

1. 每次渲染都创建新Nest实例：renderNodes循环里每次都new Nest()，每个新实例的done属性都是初始未激活状态，导致animate循环（每秒约60次）不断生成新Nest并触发flash的异步递归。
2. 闪烁状态未与节点实例绑定：节点的闪烁状态没有持久化，每次渲染都重新启动闪烁逻辑，自然会无限输出日志。

1. 重构节点存储逻辑 #

让Network的collection直接存储Nest实例，而非简单的坐标对象，确保每个节点只有一个实例，状态可以持久化。

// 修改Network的setCollection方法，直接生成Nest实例并存入collection
setCollection() {
  this.collection = Array.from({length: 50}, (_, id) => {
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height;
    return new Nest(id, x, y, 5);
  });
}

2. 调整渲染逻辑，仅按需触发闪烁 #

不再每次渲染都调用flash，而是给Nest添加触发标志，只有当节点收到消息时才启动闪烁。

// 修改Network的renderNodes方法
renderNodes() {
  this.collection.forEach(nest => {
    nest.draw();
    // 仅当需要闪烁时才触发，触发后重置标志
    if (nest.shouldFlash) {
      nest.flash();
      nest.shouldFlash = false;
    }
  });
}

3. 修复Nest的闪烁逻辑 #

添加状态锁避免重复启动闪烁，同时确保递归能正确终止。

class Nest {
  constructor(id, x, y, radius) {
    this.id = id;
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.isFlashing = false; // 防止重复启动闪烁的锁
    this.shouldFlash = false; // 外部触发闪烁的标志
  }

  draw() {
    // 绘制逻辑根据闪烁状态切换样式
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.isFlashing ? '#ff4444' : '#333333';
    ctx.fill();
    ctx.closePath();
  }

  flash(totalTimes = 6) {
    if (this.isFlashing) return; // 正在闪烁则直接返回
    this.isFlashing = true;

    const executeFlash = (currentTimes) => {
      if (currentTimes >= totalTimes) {
        this.isFlashing = false; // 闪烁结束，解锁状态
        return;
      }
      setTimeout(() => {
        console.log(`Node ${this.id} flash ${currentTimes + 1}`);
        executeFlash(currentTimes + 1);
      }, 500);
    };

    executeFlash(0);
  }
}

4. 模拟节点收到消息触发闪烁 #

当需要让某个节点闪烁时，只需设置对应Nest实例的shouldFlash为true：

// 示例：1秒后让第一个节点闪烁
setTimeout(() => {
  network.collection[0].shouldFlash = true;
}, 1000);

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