javascript - 无尽的控制台日志，javascript不会离开函数requestAnimationFrame

Question

我在控制台中收到无尽的“渲染”...为什么会发生这种情况？我想不通! :( 我大部分时间都在处理这个问题。你们能看出问题是什么吗？

控制台:

turnEvent
render
10 times render
Infunction: 150.458ms
6534 and counting times render

代码:

var turnEvent = function turnEvent(AnX, AnY) {
    var first = true;
    console.time('Infunction');
    var lengd = rects.length, i;
    one30 = 10,
    one40 = 10,  
    one301 = false, 
    one401 = false;
    for (i = 0; i < lengd; i += 1) {
        if (collides([rects[i]], AnX, AnY)) {
            var rightBox = rects[i];
            var rectangle = rects2[i];
        }
    }
    console.log("turnEvent");
    rounded_rect(rectangle.x, rectangle.y, 90, 110, 10, 'black', 'black');
    function render() {
        console.log("render"); <----------- ENDLESS CONSOLE LOGS

        -----some canvas drawings here------
        .......
       ----if and else conditions----
        if (one301 && one401) {
            rounded_rect(rectangle.x, rectangle.y, 90, 110, 10, null, 'black');
            console.timeEnd('Infunction');
        }
    }
    (function animloop(){
        requestAnimationFrame(animloop);
        render();
    })();
}

Answer 1

因为 requestAnimatinoFrame 将调用 animloop，它将执行另一个执行 animloop 等的 requestAnimationFrame 调用，因此它是一个递归操作。

您需要在animloop中设置一个条件，以不调用requestAnimationFrame

(function animloop(){
    if(someConditionMet){
       //return without executing another requestAnimationFrame
       return;
    }
    requestAnimationFrame(animloop);
    render();
})();