create jquery infinite animation not using recursion?

Question

How to use jquery to create infinite animation, BUT NOT using recursion way?

The recursion solution I found: jQuery .animate() callback infinite loop

The problem of using recursion is: while animating, the browser tab of currrent page will take MORE and MORE memory.

Answer 1

You have actually made a mistake in assuming that the code is "recursive". It is not recursive. Your comment that "the browser tab of current page will take MORE and MORE memory." is not because of any recursion in that code. If you have a memory leak per second (as per your comments), then the problem lays elsewhere.

The instances of the code actually run sequentially and not via nested stack calls (i.e. linear and not recursive).

Using the most basic example you linked to:

function start() {
    $('#element').animate({}, 5000, 'linear', start);
}
start();

here is what actually happens:

• A function called start is defined and then called once
• Inside start, an animation operation is started, then start immediately exits!
• The animate just adds information to a single animation queue for the element, then returns.
• The animation queue is processed step by step by a separate process (single timer etc).
• When the queued entry has met its expected end state, it calls the callback - The global start function stored in the queued entry.
• That simple adds another entry on the animation queue and exits.

Basically the code looks recursive, but as the operations are async, via a queue, it is not recursive. I don't know if there is an official name for these, so I just call them chained callbacks.

Answer 2

UPDATED WITH TEST RESULTS

Conclusion... All methods burn up the same amount of memory and it eventually gets released, doesn't keep building forever so not really an issue.

Example 1

This is the code the OP originally had a problem with memory usage increasing in Chrome.

(function($){
    $(function(){  //document.ready

        function start() {
                $('#animate').animate({'margin-left':'150px'}, 1000, function () {
                    $(this).animate({'margin-left':'50px'}, 1000, 'linear', start);                
                });
        }
        start();

    });
})(jQuery);

Example 2

Current solution including a callback as requested by Bergi to avoid potential "drifting" in setinterval.

(function($){

    $(function(){  //document.ready

    });

    (function customSwipe(element) {
        element
            .animate({"margin-left" : "150px"}, 1000)
            .animate({"margin-left" : "50px"}, 1000, function(){
                setTimeout(function(){
                    customSwipe(element);
                }, 2000);
            });
    })($('#animate'));

})(jQuery);

Example 3

Original Answer I gave, using setInterval()

(function($){
    $(function(){  //document.ready

            setInterval(function(){
                    $("#animate").animate({'margin-left':'150px'},1000);
                    $("#animate").animate({'margin-left':'50px'},1000);
            },2000); 

    });
})(jQuery);

Skeleton w/ Jquery

Empty page w/ only the #animate element

(function($){
    $(function(){  //document.ready



    });
})(jQuery);

DATA AFTER TAB OPEN FOR 10 MINUTES

CODE            STARTING    ENDED
Example 1       14.300k     19.996k
Example 2       14.300k     20.020k
Example 3       14.300k     20.344k
Skeleton w/ jQuery  14.300k     15.868k

Interesting that the code that did nothing still increased usage slightly. These values go up and down as memory is used and released. Another thing would be to use the "purge memory" button in task manager to see how much of that used memory is garbage waiting to be collected.

DATA AFTER 25 MINUTES

Example 1       14.300k     18.640k
Example 2       14.300k     18.724k
Example 3       14.300k     18.876k
Skeleton w/ jQuery  14.300k     15.868k

Conclusion... All methods burn up the same amount of memory and it eventually gets released, doesn't keep building forever so not really an issue.

So just using the most solid, sound code would be the best option, Example 2 would be my choice.

UPDATED USING CALLBACK

Have you tried using setTimeout with $.animate()?

(function($){
    (function customSwipe(element) {
        element
            .animate({'margin-left':'150px'}, 1000)
            .animate({'margin-left':'50px'}, 1000, function(){
                setTimeout(function(){
                    customSwipe(element);
                }, 2000);
            });
    })($('#animate'));

    $(function(){  //document.ready


    });

})(jQuery);

Remove the setTimeout() if you don't need it to delay between animations.

JSFIDDLE of the above code working...

You might also want to look into this for more intricate animations.

http://api.jquery.com/jquery.fx.interval/

Conclusion... All methods burn up the same amount of memory and it eventually gets released, doesn't keep building forever so not really an issue.

What you are seeing in the Chrome TM is every time it fires the animation, that much memory is requested and the OS "commits" that memory to chrome for the operation. Once the operation is completed, the memory is still committed. At some point Chromes garbage collector comes along and releases that memory and your usage stats will drop back down. So you will see the memory going up and down if you watch it long enough.

You can put --purge-memory-button at the end of your Chrome command line to have a Purge Memory button available in Chrome TM. This might help you to see how much memory is actually waiting to be released.

Hope this answer helps you and maybe some others.