如何使用setTimeout在n秒后修改碰撞后圆形对象的颜色属性

实现方案 #

核心逻辑说明 #

你需要为每个圆形实例新增状态标记和计时器存储字段，避免重复触发计时逻辑，具体修改步骤如下：

1. 先给圆形类新增两个实例属性，用于标记状态和存储计时器ID：

// 在圆形类的构造函数中添加
this.isInRedState = false;
this.redToBlueTimer = null;

2. 找到shapes.js第104行、第110行的颜色修改代码，替换为如下逻辑（将CHANGE_DELAY的数值替换为你需要的延迟毫秒数，比如3秒就填3000）：

const CHANGE_DELAY = 3000;

// 仅当圆形未处于红色计时状态时才执行逻辑
if (!targetCircle.isInRedState) {
  // 原有修改颜色为红色的逻辑
  targetCircle.color = 'red';
  targetCircle.isInRedState = true;
  
  // 启动倒计时
  targetCircle.redToBlueTimer = setTimeout(() => {
    targetCircle.color = 'blue';
    targetCircle.isInRedState = false;
    // 如果后续不需要该圆形再次触发变红转蓝的逻辑，可以删除上一行的状态重置代码
  }, CHANGE_DELAY);
}

额外注意事项 #

• 如果你的项目中存在圆形被销毁、移除的逻辑，需要在销毁前调用clearTimeout(targetCircle.redToBlueTimer)清除未执行的计时器，避免内存泄漏和无效代码执行报错。
• 如果不需要已经变蓝的圆形后续再次被碰撞变红，可以删掉计时回调中的targetCircle.isInRedState = false代码，后续碰撞逻辑会自动跳过该圆形。

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