jQuery $.each()-problem

Question

Hi, im making a wordpress plugin and i have a function where i import images, this is done with a $.each()-loop that calls a .load()-function every iteration. The load-function page the load-function calls is downloading the image and returns a number. The number is imported into a span-element. The source and destination Arrays is being imported from LI-elemnts of a hidden ULs.

this way the user sees a counter counting from zero up to the total number of images being imported. You can se my jQuery code below:

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

    $('#mrc_imp_img').click(function(){
    var dstA = [];
    var srcA = [];
    $("#mrc_dst li").each(function() { dstA.push($(this).text()) });
    $("#mrc_src li").each(function() { srcA.push($(this).text()) });

        $.each(srcA, function (i,v) {
            $('#mrc_imgimport span.fc').load('/wp-content/plugins/myplugin/imp.php?num='+i+'&dst='+dstA[i]+'&src='+srcA[i]);
        });

    });


});

This works pretty good but sometimes it looks like the load function isn't updating the DOM as fast as it should because sometimes the numbers that the span is updated with is lower than the previous and almost everytime a lower number is replacing the last number in the end. How can i prevent this from happening and how can i make it hide '#mrc_imp_img' when the $.each-loop is ready?

Answer 1

AJAX calls which have been called earlier are not guaranteed to finish earlier so the smaller number can overwrite the bigger. One solution is to simply increment the counter on each successful call:

jQuery(function($) {
  $('#mrc_imp_img').click(function(){
    var dstList = $("#mrc_dst li");
    var srcList = $("#mrc_src li");
    dstList.each(function(i) { 
      var dst = $(this).text();
      var src = srcList[i].text();
      $.post('/wp-content/plugins/myplugin/imp.php?num='+i+'&dst='+dst+'&src='+src, function() {
        $('#mrc_imgimport span.fc').text($('#mrc_imgimport span.fc').text()+1);
      });
    });
  });
});

(Changed the code to avoid unnecessary array operations, changed onready call to use shorthand, changed AJAX call to use POST which should be used for operations that change state.)

Answer 2

Most servers likely have a finite number of threads running. If you're firing off 10 calls at once, and your server only has 5 threads, 5 of them will fail.

Also - once you max out all the running threads, no other users can access the server, so you're essentially DOS-ing the server.

If you don't mind slowing it down to one call at a time, do what Tgr recommended which serializes the calls, waiting until each one completes before starting the next one.

I would prefer what Yoda suggested. What you can do is turn it into one server call that processes the entire array. If you really want to update a counter client-side, that one server call can update a counter in the database - and then a 2nd ajax call can poll the server every few seconds to find out where the counter is. Obviously wont be guaranteed to be sequential but will be better for your server health. You could also fake the sequential aspect (if you're on #3 and the next call yields a #6 - increment it client side one by one)

As far as not seeing an alert, there is probably a javascript error before or on the alert line. Try using firebug and the console.log statement, or even bette, step through it with the firebug debugger.