Javascript requestAnimFrame执行多次

我使用openCV.js运行了一个情绪检测，用于人脸检测，tensorflow.js用于情绪分类。当我启动情绪检测时，我调用requestAnimFrame（myProcessingLogic）函数并将检测逻辑传递给回调参数。我的处理逻辑再次调用requestAnimFrame（myProcessingLogic）

禁用情绪检测时，将设置一个全局变量，然后禁用对requestAnimFrame的递归调用。这个很好用

…但在每次重新激活情绪检测时，都会另外调用requestAnimFrame调用。这会导致性能问题

我试图全局保存requestAnimFrame（）的返回id，以便在检测停止时调用cancelAnimFrame（），但这似乎没有效果

第一个电话：

function startVideoProcessing() {
    if (!streaming) {
        console.warn("Please startup your webcam");
        return;
    }

    canvasInput = document.createElement('canvas');
    canvasInput.width = videoWidth;
    canvasInput.height = videoHeight;
    canvasInputCtx = canvasInput.getContext('2d');

    canvasBuffer = document.createElement('canvas');
    canvasBuffer.width = videoWidth;
    canvasBuffer.height = videoHeight;
    canvasBufferCtx = canvasBuffer.getContext('2d');

    srcMat = new cv.Mat(videoHeight, videoWidth, cv.CV_8UC4);
    grayMat = new cv.Mat(videoHeight, videoWidth, cv.CV_8UC1);

    requestAnimId = requestAnimationFrame(processVideo);
}

处理逻辑

function processVideo() {
    if(!streaming) {
        return;
    }

    /*
    logic removed to simplify
    */

    requestAnimId = requestAnimationFrame(processVideo);
}

我查看了firefox运行时分析，发现每次重新激活都会执行一个额外的函数调用

---

我自己发现了这个bug。这与上面发布的代码无关。在每次情绪跟踪开始时，我都会在视频元素中添加一个EventListener。另一方面，EventListener执行startVideoProcessing。由于这些eventlistener相互堆叠，因此它们被执行了多次

---

对于面临相同问题的任何人，请注意您的事件侦听器；）

是我自己发现的。这与上面发布的代码无关。在每次情绪跟踪开始时，我都会在视频元素中添加一个EventListener。另一方面，EventListener执行startVideoProcessing。由于这些eventlistener相互堆叠，因此它们被执行了多次

对于面临相同问题的任何人，请注意您的事件侦听器；）

function stopEmotionTracking() {
    stopCamera();
    cancelAnimationFrame(requestAnimId);
    requestAnimId = null;

}