基于JS数组push()和pop()实现精灵编辑器撤销功能遇阻求助

嘿，兄弟，太懂这种感觉了——自己捣鼓个给美术朋友用的精灵编辑器，本来一切顺风顺水，结果栽在「看似简单」的撤销功能上，那种挠头的挫败感我可太熟了！咱一步步拆解问题，把这个坎儿迈过去。

你已经有了记录变化像素的数组，这简直是做增量撤销的绝佳基础——千万别每次操作都存整个64000元素的screenData数组，既占内存又没必要。我们要存的是「每一步操作的反向操作」：也就是这次操作中所有被修改像素的「索引+修改前的值」。

1. 撤销栈的结构没搞对 #

最常见的问题是：一次操作（比如画一笔、填一块）改了N个像素，但你只存了1个，或者把每个像素的变化单独存成了一步，导致撤销时要么漏改，要么要疯狂点撤销键。

• 正确姿势：每次用户完成一次完整操作（比如鼠标抬起、点击确认按钮），就把这次操作中所有变化的像素（[索引, 旧值]）组成的数组，存到撤销栈里。注意要存数组的副本，别直接存引用！

  // 假设currentChanges是你当前操作中记录的所有变化像素
  if (currentChanges.length > 0) {
    undoStack.push([...currentChanges]); // 用扩展运算符存副本，避免引用污染
    currentChanges = []; // 清空当前记录，准备下一次操作
    redoStack = []; // 新操作后，重做栈要清空
  }
  

2. 撤销时的恢复逻辑出错 #

比如你只恢复了部分像素，或者搞反了新旧值。这里的关键是：撤销时不仅要把屏幕数据改回去，还要把「当前的新值」存到重做栈里，方便用户反悔。

function undo() {
  if (undoStack.length === 0) return; // 没东西可撤销就直接返回
  
  const lastOperation = undoStack.pop();
  const redoOperation = [];
  
  // 遍历每一个变化的像素，恢复旧值，同时记录当前值用于重做
  lastOperation.forEach(([pixelIndex, oldValue]) => {
    redoOperation.push([pixelIndex, screenData[pixelIndex]]);
    screenData[pixelIndex] = oldValue;
  });
  
  redoStack.push(redoOperation);
  renderScreen(); // 别忘了调用你的屏幕渲染函数，让变化显示出来
}

3. 连续操作的边界没处理好 #

比如用户按住鼠标拖动画画，每画一个像素你就存一次撤销记录，这会导致撤销时要一下一下点，体验极差。

• 解决办法：用个定时器延迟记录，比如用户停止操作（鼠标抬起）后500ms，再把当前的变化推入撤销栈；或者直接以「鼠标按下→抬起」作为一次完整操作的边界，抬起时再存记录。

4. 数组引用的坑（隐形杀手） #

JS里数组是引用类型，如果你直接把currentChangespush到撤销栈，之后又修改了currentChanges，那栈里的内容也会跟着变！

• 避坑：一定要存数组的副本，比如用[...currentChanges]、currentChanges.slice()，如果是复杂对象就用JSON.parse(JSON.stringify(currentChanges))（前提是元素都是简单类型）。

1. 打开浏览器控制台，每次完成操作后console.log(undoStack)，看看栈里的内容是不是你预期的变化数组，有没有缺失或重复的元素。
2. 执行撤销后，console.log(screenData)看看对应像素的值是不是真的恢复成了旧值。
3. 检查你记录变化像素的逻辑：是不是每次修改像素时，都正确记录了「索引+旧值」，有没有漏掉某些操作（比如填充、擦除）。

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