如何阻止JavaScript中drawOnCanvas函数重复运行？

你需要利用window.cancelAnimationFrame取消上一次未完成的动画请求，核心是保存每次动画的请求ID，在新点击触发时先终止旧动画。

修改后的代码： #

// 保存动画请求ID，放在点击事件外部，确保所有点击实例都能访问
let requestId = null;

$('#mybtn').click(function () {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d', {willReadFrequently: true});
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 纠正拼写错误：interations → iterations
    var iterations = 0;

    // 先取消上一次的动画请求
    if (requestId) {
        window.cancelAnimationFrame(requestId);
    }

    function drawOnCanvas() {
        iterations++;
        // draw stuff on the canvas
        
        if (iterations < Number.MAX_SAFE_INTEGER - 1) {
            // 将请求ID赋值给requestId，方便后续取消
            requestId = window.requestAnimationFrame(drawOnCanvas);
        } else {
            // 动画结束后重置requestId
            requestId = null;
        }
    }
    // 启动新动画并记录请求ID
    requestId = window.requestAnimationFrame(drawOnCanvas);
});

关键说明： #

• requestId定义在点击事件外部，作为共享状态追踪当前运行的动画请求。
• 每次点击按钮时，先检查requestId是否存在，若存在则调用cancelAnimationFrame终止旧动画循环，避免多实例并行。
• 调用requestAnimationFrame时，将返回的请求ID赋值给requestId，确保每次循环都能追踪最新请求；动画结束后重置requestId避免无效取消。
• 顺便纠正了你代码里的拼写错误：interations应改为iterations，否则会触发变量未定义错误。

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