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+进行了更新，请点击link to the original question以获取最新版本。

您可以使用最初发布在Sequencing Ajax Requests

的答案上的$.ajaxQueue()

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

或类似的东西。

jQuery序列

4 个答案:

应用于您的来源