последовательность jQuery

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);
    });
});

Каждый .get должен быть запущен после завершения предыдущего .Теперь все .get начинаются за один раз.

Есть идеи?

Answer 1

ПРИМЕЧАНИЕ: Плагин, указанный здесь, был обновлен для jQuery 1.5+, перейдите по ссылке на исходный вопрос , чтобы получить самую новую версию.

---

Вы можете использовать это $.ajaxQueue(), первоначально опубликованное в моем ответе на Последовательные запросы Ajax

(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);

Применимо к вашему источнику

$(".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);
     }
    });
});

Answer 2

jQuery по умолчанию не является многопоточным, но я написал плагины, которые предоставляют функциональность, которая имитирует его. Код состоит из двух частей. Первый создает «Рабочие очереди» и предоставляет функциональные возможности как для переднего плана, так и для фоновой очереди, где приоритетная работа имеет приоритет над фоновой работой. Это доступно в этом посте: http://code.ghostdev.com/posts/javascript-threading-revisted-jquery. Второй создает очередь AJAX, которая имеет приоритет над приоритетными и фоновыми очередями и приостанавливает работу во время обработки вызова AJAX. Это доступно в этом посте: http://code.ghostdev.com/posts/javascript-threading-ajax-queueing.

Для их использования, безусловно, потребуется, по крайней мере, некоторая реструктуризация вашего кода, но я реализовал их, чтобы избежать тайм-аутов браузера и планировать события.

Извините, я могу попытаться привести пример. Предполагая, что вы включили эти фрагменты и теперь у вас есть рабочие очереди, что-то вроде этого, вероятно, подходит к вашему примеру кода:

$.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

Вы можете использовать механизм очередей jQuery:

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

Вам нужно использовать $.ajax() и установить async на false.

В этом случае вы должны написать:

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

иличто-то в этом роде.