Asynchronous Javascript Recursion

Question

I'm not sure how to ask the question rattling around in my head right now, so bear with me. I'm brand new to asynchronous programming, and I figured the best way to learn would be to make a little javascript pong game. I started with a shootball() function and just bounce a div around another div. How I did this was with something like this:

function shootball(angle, speed){
    angle = (angle/360.0)*2*Math.PI;
    var ballmotion = setInterval(function(){
        var nowx, nowy, minusY, plusX;
        nowx = $("#ball").position().left;
        nowy = $("#ball").position().top;
        minusY = Math.sin(angle) * 4.0;
        plusX = Math.cos(angle) * 4.0;
        if(hitsWall(nowx+plusX, nowy-minusY)){
            clearInterval(ballMotion);
            shootball(newAngle(nowx+plusX, nowy-minusY), speed);
        }
        $("#ball").css("left", (nowx + plusX)).css("top", (nowy - minusY));
     }, 10/speed);
}

I'm not a big fan of big unnecessary recursion, but I just wanted to try it out. Lo and behold it works exactly as I would expect. But as I started fleshing out the rest of the program, it occurred to me that I had no way of avoiding this recursive nature. So my question: Does javascript somehow recognize that the calling "shootball" function is essentially finished after calling clearInterval? Or does this really find itself loading up my stack with unnecessary activation records? Thanks in advance for any expertise this may drum up.

You could set a break point and have a look at the callstack ;) — Felix Kling
– Felix Kling, Commented Jun 13, 2013 at 15:00
If a function takes longer to invoke than the interval, setInterval can get nasty, consider using setTimeout instead. Also, I'm sure you can move the majority of the function outside the expression so a new function instance isn't created each time. — Paul S.
– Paul S., Commented Jun 13, 2013 at 15:01
I'm not entirely sure but I believe that whenever the ball does not hit the wall the stack is emptied. — aledujke
– aledujke, Commented Jun 13, 2013 at 15:02

Bergi · Accepted Answer · 2013-06-13 15:04:17Z

4

Does javascript somehow recognize that the calling "shootball" function is essentially finished after calling clearInterval?

No, shootball was finished long ago, right after the assignment to ballmotion. However, its variable scope (angle, speed, ballmotion and the parent scope) did persist since the anonymous function built a closure with it and was referenced from outside (from the scheduler). And that scope will get garbage collected after the clearInterval call which removed the references to it.

does this really find itself loading up my stack with unnecessary activation records?

No. Every function that is executed via setTimeout/setInterval runs in its own execution context, with a brand new call stack.

answered Jun 13, 2013 at 15:04

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Derek 朕會功夫 Over a year ago

The variables might not be necessarily cleared since in some browsers they will keep all the variables alive as long as the page is running.

Bergi Over a year ago

@Derek: You mean some browsers screw up garbage collection of clearInterval?

Derek 朕會功夫 Over a year ago

I'm not sure but since I don't think it is written in the standards so the browser does not have to necessarily clear useless variables.

Collectives™ on Stack Overflow

Asynchronous Javascript Recursion

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related