JavaScript绘图板Undo功能异常：单次撤销删除多步操作

你的撤销操作一次性回退两步的核心原因大概率是事件重复绑定或状态保存逻辑的触发时机异常，以下是具体修复方案及解释：

修复后的完整代码 #

const canvasStates = []; // 存储画布状态的栈
let currentCanvasStateIndex = -1; // 当前状态的索引
const undoBtn = document.getElementById("undo");
const canvas = document.getElementById("canvas"); // 确保获取到正确的canvas元素
const ctx = canvas.getContext("2d"); // 确保获取到2D绘图上下文

// 防抖函数：避免mouseup事件重复触发导致重复保存状态
function debounce(func, delay = 80) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

window.addEventListener("load", () => {
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    setCanvasBackground();
    
    // 初始化画布状态
    const initialCanvasState = ctx.getImageData(0, 0, canvas.width, canvas.height);
    canvasStates.push(initialCanvasState);
    currentCanvasStateIndex = 0;
    
    updateUndoButtonState();
    
    // 确保撤销事件只绑定一次
    undoBtn.removeEventListener("click", handleUndo);
    undoBtn.addEventListener("click", handleUndo);
    
    // 绑定防抖后的mouseup事件，避免重复保存状态
    canvas.addEventListener("mouseup", debounce(handleMouseUp));
});

function handleUndo() {
    if (currentCanvasStateIndex > 0) {
        currentCanvasStateIndex--;
        const previousState = canvasStates[currentCanvasStateIndex];
        ctx.putImageData(previousState, 0, 0); // putImageData会直接覆盖画布，无需提前清空
        updateUndoButtonState();
    }
}

function handleMouseUp() {
    clicked = false;
    const currentCanvasState = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    // 删除当前状态之后的所有历史（如果之前执行过撤销操作）
    canvasStates.splice(currentCanvasStateIndex + 1);
    canvasStates.push(currentCanvasState);
    currentCanvasStateIndex = canvasStates.length - 1;
    
    updateUndoButtonState();
}

function updateUndoButtonState() {
    undoBtn.disabled = currentCanvasStateIndex <= 0;
}

关键修复点说明 #

1. 添加防抖处理
   鼠标抬起事件可能因浏览器兼容性或快速操作触发多次，导致同一个绘制动作被重复保存到状态栈，使用防抖函数可以确保一次绘制只保存一次状态。

2. 确保事件只绑定一次
   将撤销按钮的事件绑定移到window.load中，并先移除旧的监听，避免代码重复执行导致事件多次绑定（点击一次按钮触发多次撤销操作）。

3. 简化状态保存逻辑
   原代码中先递增索引再删除后续状态的逻辑容易出错，改为先删除当前索引之后的历史状态，再添加新状态，最后将索引直接设为数组最后一位，逻辑更直观，减少索引操作失误。

4. 移除不必要的clearRect
ctx.putImageData会直接覆盖整个画布的像素数据，无需提前调用clearRect清空画布。

额外检查项 #

• 确认页面中只有一个id为undo的按钮元素
• 确认canvas和ctx变量已正确获取（代码中补充了基础获取逻辑，需根据实际DOM结构调整）
• 确认handleMouseUp没有在其他事件（如mouseleave）中被重复调用

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