CODEWITHSUNDEEP
javascriptcanvasrecursionrequestanimationframe
Guðni Már Gilbert
Guðni Már Gilbert

Reputation: 155

Endless console logs, javascript wont leave the function requestAnimationFrame

I am getting endless 'render' in the console... Why does this happen? I can't figure it out! :( I've been at this all day mostly. Can you guys see what the problem is?

Console:

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

Code:

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();
    })();
}

Upvotes: 0

Views: 110

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42736

Because requestAnimatinoFrame will call animloop, which will execute another requestAnimationFrame call that executes animloop etc etc etc, its a recursive action.

You need to make a condition in animloop to not call requestAnimationFrame

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

Upvotes: 2

Related Questions