jQuery sequence

Question

$(".item").each(function(){
    var item_link = $(this).find("a").attr("href");
    $(this).prepend('<div class="img_url"></div>');
    var img_url = $('div.img_url', this);
    $.get(item_link, function(data) {
        var src = $('.poster img', data).attr('src');
        img_url.html(src);
    });
});

Each .get should be started after the previous is finished. Now all the .get start in one time.

Any idea?

Answer 1

You need to use $.ajax() and set async to false.

In this case, you would write:

$.ajax({
    url: itemlink,
    async: false,
    success: function(data) {
       //your success function
    });

or something like that.

Answer 2

jQuery is not threaded by default, but I've written plugins that provide functionality that emulates it. There are two parts to the code. The first creates 'Work Queues' and provides functionality for both a foreground and a background Queue where foreground work is prioritized over background work. It's available in this post: http://code.ghostdev.com/posts/javascript-threading-revisted-jquery. The second creates an AJAX Queue which takes priority over the foreground and background Queues and suspends operation while an AJAX call is processing. It's available in this post: http://code.ghostdev.com/posts/javascript-threading-ajax-queueing.

Using them will absolutely require at least some restructuring of your code, but I've implemented them so that I can avoid browser timeouts and schedule things.

Sorry, I can try to include a bit of an example. Assuming you've included those snippets and now have working queues, something like this probably comes close with your example code:

$.addajaxwork('imageLoading', $('.item'), function () {
  var item_link = $(this).find("a").attr("href");

  $(this).prepend('<div class="img_url"></div>');

  var img_url = $('div.img_url', this);

  $.get(item_link, function(data) {
    var src = $('.poster img', data).attr('src');
    img_url.html(src);
  });
});

Answer 3

You could use jQuery's queueing mechanism:

var queueable = $(".item");

queueable.each(function(){

    var item_link = $(this).find("a").attr("href");
    $(this).prepend('<div class="img_url"></div>');
    var img_url = $('div.img_url', this);

    $.queue(queueable, 'get', function(next){
        $.get(item_link, function(data) {
            var src = $('.poster img', data).attr('src');
            img_url.html(src);
            next();
        });
    });

});

$.dequeue(queueable, 'get');

Answer 4

You could use this $.ajaxQueue() originally posted on my answer to Sequencing Ajax Requests

(function($) {
  // jQuery on an empty object, we are going to use this as our Queue
  var ajaxQueue = $({});

  $.ajaxQueue = function(ajaxOpts) {
    // hold the original complete function
    var oldComplete = ajaxOpts.complete;

    // queue our ajax request
    ajaxQueue.queue(function(next) {

      // create a complete callback to fire the next event in the queue
      ajaxOpts.complete = function() {
        // fire the original complete if it was there
        if (oldComplete) oldComplete.apply(this, arguments);

        next(); // run the next query in the queue
      };

      // run the query
      $.ajax(ajaxOpts);
    });
  };

})(jQuery);

Applied to your source

$(".item").each(function(){
    var item_link = $(this).find("a").attr("href");
    $(this).prepend('<div class="img_url"></div>');
    var img_url = $('div.img_url', this);
    $.ajaxQueue({
     url: item_link, 
     type: 'GET',
     success: function(data) {
        var src = $('.poster img', data).attr('src');
        img_url.html(src);
     }
    });
});