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。 由於這些事件偵聽器彼此堆疊，因此它們被多次執行。

對於面臨相同問題的任何人，請注意事件監聽器;）