Js停止重复运行的功能答案

【问题标题】：Js stopping repeated functions runningJs停止重复运行的功能
【发布时间】：2022-12-08 02:35:24
【问题描述】：

好吧，我是一个 JS 新手，我已经搜索了这些论坛和谷歌，但还没有找到有效的答案。但是，我敢肯定你们中的一位版主会立即发现所问的相同问题并将其关闭，所以开始吧。

这是我的代码：

    $('#mybtn').click(function () {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d', {willReadFrequently: true});
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        var interations = 0;

        function drawOnCanvas() {
            iterations++;
            //draw stuff on the canvas
            if (iterations < Number.MAX_SAFE_INTEGER - 1) {
                window.requestAnimationFrame(drawOnCanvas);
            }
        }
        drawOnCanvas();
    });

是的，我画了很多像素。这是很多数学。

这是我的问题：

如果用户第二次点击 mybtn，它会清除画布并重新开始绘制。但是，之前的 drawOnCanvas 函数并没有停止绘图，所以现在我有 2 个 drawOnCanvas 函数在运行，它们都在同时绘图。再次点击，3个drawOnCanvas运行。

我所期望的是当单击按钮时第一个运行的脚本将终止。我想我看到的是创建了另一个脚本实例并且都在运行。

我试过设置全局 jQuery 布尔值，但是，当第二个实例启动并设置布尔值时，第一个实例似乎看不到它，这是有道理的。

关于如何同时运行其中一个的任何想法？我的逻辑让我失望了。

谢谢

【问题讨论】：

单击按钮时可能使用cancelAnimationFrame？

标签： javascript jquery

【解决方案1】：

单击按钮时，您可以添加一个 .one 单击侦听器（在下次单击按钮时触发一次）以清除当前正在进行的动画。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
$('#mybtn').click(function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    let iterations = 0;
    function drawOnCanvas() {
        iterations++;
        //draw stuff on the canvas
        if (iterations < Number.MAX_SAFE_INTEGER - 1) {
            window.requestAnimationFrame(drawOnCanvas);
        }
    }
    drawOnCanvas();
    $('#mybtn').one('click', () => {
        window.cancelAnimationFrame(drawOnCanvas);
    })
});

【讨论】：