requestAnimFrame被执行多次

Question

我有一个与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);
}

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

}

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

Answer 1

自己发现了该错误。 它与上面发布的代码无关。 在情感跟踪的每次开始时，我都向视频元素添加了一个EventListener。 另一方面，EventListener执行startVideoProcessing。 由于这些事件侦听器彼此堆叠，因此它们被多次执行。

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