汉诺塔可视化工具时序动画实现问题求助

我仔细看了你的汉诺塔可视化代码，核心问题确实是浏览器的渲染机制导致的——JavaScript会同步执行所有样式修改，浏览器会把这些修改攒到代码执行完才一次性渲染最终状态，所以你看不到圆盘抬起、移动、落下的分步过程，直接看到了最终结果。

问题根源 #

你的draw函数里同步修改了三个样式：bottom（抬起）、transform（移动）、bottom（落下），浏览器会把这三个修改合并，只渲染最后一次的样式状态，完全跳过了中间的动画过程。而且整个towerOfHanoi和moveDisk都是同步执行，没有给浏览器留渲染时间。

解决方案：用异步等待控制动画时序 #

我们需要把每一步动画拆分成异步操作，让浏览器有时间渲染每一个中间状态。具体来说：

1. 把draw函数改成返回Promise的异步函数，每一步样式修改后等待一段时间（可调整）
2. 在moveDisk和towerOfHanoi中使用await等待每一步动画完成
3. 确保循环中的每一次移动都等待上一次动画结束后再执行

修改后的关键代码如下：

// 辅助函数：返回一个Promise，等待指定毫秒数
function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 改进后的draw函数：异步执行每一步动画
async function draw(a, b, distance){
  const num = a[a.length-1].toString();
  const disk = document.getElementById(num);
  
  // 用getComputedStyle更可靠地获取当前translateX值
  const computedStyle = getComputedStyle(disk);
  const currentX = parseInt(computedStyle.transform.split(',')[4] || 0);
  const targetX = currentX + (distance * 400);

  // 1. 抬起圆盘
  disk.style.bottom = "385px";
  await wait(300); // 等待抬起动画完成

  // 2. 移动到目标柱
  disk.style.transform = `translateX(${targetX}px)`;
  await wait(500); // 等待移动动画完成

  // 3. 放下圆盘
  disk.style.bottom = `${b.length * 20}px`;
  await wait(300); // 等待放下动画完成
}

// 修改moveDisk为异步函数
async function moveDisk(a, b, c, number, distance) {
  if (c.length == number) return;
  if(!a.length && b.length){
    await draw(b, a, distance*-1);
    a.push(b[b.length-1]);
    b.pop();
  } else if (!b.length && a.length) {
    await draw(a, b, distance);
    b.push(a[a.length-1]);
    a.pop();
  } else {
    if(a[a.length-1] < b[b.length-1]){
      // 汉诺塔每次只移动一个圆盘，原while逻辑冗余，改为单次移动
      await draw(a, b, distance);
      b.push(a[a.length-1]);
      a.pop();
    } else if(b[b.length-1] < a[a.length-1]){
      await draw(b, a, distance*-1);
      a.push(b[b.length-1]);
      b.pop();
    }
  }
};

// 修改towerOfHanoi为异步函数，确保每次循环等待移动完成
async function towerOfHanoi(number){
  const a = [];
  const b = [];
  const c = [];
  let iterator = number;

  //fill first tower with disks equal to number imput
  for(iterator; iterator > 0; iterator--){
    a.push(iterator);
  }

  // create the disks
  a.forEach((item) => {
    const element = document.createElement("div");
    element.className = "disk";
    element.setAttribute("id", item);
    const style = {
      width: 400/(number+1)*item + "px",
      bottom: a.indexOf(item)*10 + "px",
      background: "rgb(" +Math.floor(Math.random()*256) +"," +Math.floor(Math.random()*256) +"," +Math.floor(Math.random()*256) +")",
      transform: "translateX(0px)",
      transition: "all 0.3s ease" // 添加平滑过渡
    }
    Object.assign(element.style, style);
    tower1.appendChild(element);
  });

  // 修改循环部分，每次移动后等待异步完成
  if(number%2 != 0){
    while(c.length < number){
      await moveDisk(a, c, c, number, 2);
      if(c.length === number) break;
      await moveDisk(a, b, c, number, 1);
      await moveDisk(b, c, c, number, 1)
    }
  }else {
    while(c.length < number){
      await moveDisk(a, b, c, number, 1);
      if(c.length === number) break;
      await moveDisk(a, c, c, number, 2);
      await moveDisk(b, c, c, number, 1);
    }
  }
};

额外的代码改进建议 #

• 替换过时的DOM选择器：用document.querySelector('.submit')代替getElementsByClassName('submit')[0]，更简洁且返回单个元素。
• 避免全局变量：创建圆盘时的element变量要加上const声明，防止污染全局作用域。
• 改用递归实现汉诺塔算法：当前的循环版本逻辑较复杂，递归版本更符合汉诺塔的数学逻辑，也更容易理解和调试：

  async function hanoiRecursive(n, from, to, aux, distance) {
    if (n === 1) {
      await moveDisk(from, to, ...); // 移动单个圆盘
      return;
    }
    await hanoiRecursive(n-1, from, aux, to, distance);
    await moveDisk(from, to, ...);
    await hanoiRecursive(n-1, aux, to, from, distance);
  }
  

• 优化样式管理：圆盘的宽度和间距可以用CSS变量定义（比如:root { --peg-width: 400px; --disk-gap: 20px; }），然后在JS中读取这些变量，代码更易维护。

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