Javascript Recursion

Question

I have an ajax call and would like to recall it once I finish parsing and animating the result into the page. And that's where I'm getting stuck.

I was able to recall the function, but it seems to not take into account the delays in the animation. i.e. The console keeps outputting the values at a wild pace.

I thought setInterval might help with the interval being the sum of the length of my delays, but I can't get that to work...

function loadEm(){
    var result=new Array();     
    $.getJSON("jsonCall.php",function(results){
        $.each(results, function(i, res){
            rand = (Math.floor(Math.random()*11)*1000)+2000;
            fullRand += rand;
            console.log(fullRand);
            $("tr:first").delay(rand).queue(function(next) {
            doStuff(res);
                next();
            });
        });
        var int=self.setInterval("loadEm()",fullRand);
    });
  }
});

score 3 · Accepted Answer · 2011-01-15 09:01:31Z

3

use setTimeout. setInterval will call again... and again... and again...
use var fullRand at the top of loadElm (or inside the JSON callback). Without it you will increment the same global variable each time loadElm is called. In fact, you should use var with all your local variables -- that includes rand here. The Jibbering JavaScript Closure Notes covers variables and much more.
use setTimeout(loadElm, fullRand) -- don't use a string in the first parameter :) See the MDC setTimeout documentation.
Check for JavaScript errors (keep firebug/IE developer tools/the error console handy)
Instead of using setTimeout, consider keeping count of how many of the animations have finished vs. how many total have finished! Imagine this:

===

// closure in JSON callback. see Jibbering notes.
var count = 0
$.each(results, function(i, res) {
  var rand = (Math.floor(Math.random()*11)*1000)+2000
  count++ // have to do action
  $("tr:first").delay(rand).queue(function(next) {
    ...
    count-- // action done
    if (!count) { // means count == 0 here :-) then...
      loadElm() // ...all actions done
    }
  })
})
if (!count) {
  // err... no animations started :(
}

Happy coding.

edited Jan 15, 2011 at 9:01

answered Jan 15, 2011 at 8:49

user166390

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

1 Comment

rpophessagr Over a year ago

Thanks! I'll implement it and let you know!

Collectives™ on Stack Overflow

Javascript Recursion

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related