如何为每个动态创建的div分配独立的位置跟踪变量？

我来帮你拆解下当前代码的问题，然后给出两种能实现你预期效果的解决方案：

首先看你原代码的核心问题：

1. 变量作用域错误：Count 和 divX 都定义在setInterval的回调函数内部，导致每次定时器触发时这两个变量都会被重新初始化。Count永远从0开始，所以会一直创建div；而每个div的left只会被修改一次（从1000px变成900px），完全没有持续左移的动画效果。
2. 缺少独立状态维护：你想让每个div自己逐步左移，但原代码既没有循环更新位置的逻辑，也没给每个div绑定独立的位置变量，自然达不到预期。

方案一：JavaScript手动控制每个div的独立动画 #

适合需要精细控制移动逻辑（比如中途变速、改变方向）的场景：

// 把计数变量放在定时器外部，确保能累计创建次数
let createCount = 0;
const maxCreateTimes = 10; // 限制只创建10个div

// 启动创建div的定时器
const createInterval = setInterval(() => {
  // 达到10次就停止创建
  if (createCount >= maxCreateTimes) {
    clearInterval(createInterval);
    return;
  }

  // 创建并初始化div
  const newDiv = document.createElement("div");
  newDiv.classList.add("NewDiv");
  newDiv.style.position = "absolute"; // 必须设置定位，left属性才会生效！
  let currentX = 1000; // 每个div独享的位置变量，不会和其他div共用
  newDiv.style.left = `${currentX}px`;
  document.body.appendChild(newDiv);

  // 为当前div单独启动移动定时器
  const moveInterval = setInterval(() => {
    currentX -= 10; // 每次向左移动10px，可自行调整移动速度
    newDiv.style.left = `${currentX}px`;

    // 移动到目标位置（比如0px）后停止动画
    if (currentX <= 0) {
      clearInterval(moveInterval);
    }
  }, 50); // 50ms更新一次位置，动画更流畅

  createCount++;
}, 1000); // 每秒创建一个div

关键改进：

• 将计数变量移到定时器外部，实现创建次数的累计控制
• 每个div拥有独立的位置变量currentX，避免状态共用
• 为每个div单独启动移动定时器，实现持续左移的动画效果

方案二：用CSS动画实现（更简洁、性能更好） #

如果不需要复杂的交互逻辑，CSS动画是最优选择——浏览器会自动优化动画性能，代码也更清爽：

首先在CSS中定义左移动画：

.NewDiv {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #3498db; /* 给个默认背景色方便查看效果 */
  /* 定义动画：5秒完成移动，线性速度，动画结束后保持最终状态 */
  animation: slideLeft 5s linear forwards;
}

@keyframes slideLeft {
  from {
    left: 1000px; /* 动画起始位置 */
  }
  to {
    left: 0px; /* 动画结束位置 */
  }
}

然后JS只需要负责定时创建div即可，不用管移动逻辑：

let createCount = 0;
const maxCreateTimes = 10;

const createInterval = setInterval(() => {
  if (createCount >= maxCreateTimes) {
    clearInterval(createInterval);
    return;
  }

  const newDiv = document.createElement("div");
  newDiv.classList.add("NewDiv");
  document.body.appendChild(newDiv);

  createCount++;
}, 1000);

为什么推荐这个方案？

• 代码量少，逻辑清晰，不用维护一堆定时器和状态变量
• CSS动画由浏览器合成线程处理，比JS定时器动画更流畅、性能更好
• 可以通过修改CSS轻松调整动画时长、速度曲线、起始/结束位置

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