Question

I have some PNG’s being moved around a screen in a repeated loop which I believe may be crashing some browsers.

For example:

function parachute_drop(drop_object, animation_duration) {

    $(drop_object)
        .animate({top: "750px"},animation_duration)
        .animate({top:"-150px", opacity: 100
        },{
        duration: 0, 
        complete: function(){
            parachute_drop(drop_object,animation_duration);
        }
    });
 }

 parachute_drop('#object_id',10000);

Everytime the animation completes, it launches the function again and into infinity.

I didn’t forsee this would be problematic but I have heard that this is not very good and well, my site is now crashing after some time it seems.

Is there a way to do endless loops like this in a more stable manner? It seems a bit bizarre that simply moving a 9kb png file from the top to the bottom of the screen over and over again is a strain on system resources. Whats the issue and how do I approach this better?

Answer 1

Your code is a recursive algorithm and may crash when then fill up the code stack of the javascript machine of the browser. You can use a different approach based on timer to achieve a continuous loop.

You can start from this example : http://www.irengba.com/codewell/