jQuery中的多个AJAX调用每个循环在async为true时导致错误

Question

我正在创建一个Chrome扩展程序，它将在网站上的some_link旁边添加一个链接的图像。 我正在使用AJAX来获取页面的链接， some_link链接的页面如下所示：

$( function() {
    $( '#list_of_links li' ).each( function() {
        var refLink = $( this ).find( '.link_id' );
        var some_link = refLink.attr( 'href' );
        var imagesrc = chrome.extension.getURL('image.png');
        var href;
        $.ajax({ 
            url:    some_link,
            success:function( data ) {
                        href = $( data ).find( '#link_i_want' ).attr( 'href' );
                        var linked_image = '<a href="' + href + '"><img src="' + imagesrc + '"></a>';
                        $( linked_image ).insertAfter( refLink );
                    },
            async:  false
        });
    });
});

这将为列表中的所有链接插入具有正确链接的图像，但是当然会挂起浏览器，直到所有AJAX调用完成。 我知道设置async: true （或简单地删除async设置）可以防止这种情况挂起，但是这又带来了另一个问题：仅插入了某些图像，jQuery引发了以下错误：

Uncaught Error: Syntax error, unrecognized expression: Your request is already in process. Please click your browser's Refresh/Reload button to continue.

在我的搜索中，我没有发现此错误的任何信息，我想知道是什么原因导致的，以及如何使我的代码与async: true工作async: true可以加快页面加载速度并防止Chrome挂起。

任何帮助将不胜感激。 谢谢！

更新：

在研究了jqXHR对象的内容之后，我发现其中一些是text/plain而不是text/html ，应该是。 然后，我查看了文本是什么，发现它是：

您的请求已在处理中。 请单击浏览器的“刷新/重新加载”按钮以继续。

似乎正在发生的事情是服务器或Chrome返回的是纯文本而不是HTML，因为我发出太多请求的速度太快了。 现在，我试图发现的是是否有一种方法可以防止这种情况的发生。

Answer 1

未经测试，但我会尝试

function ajaxLoop(i) {
    var refLink = jQuery('.link_id').eq(i);
    var some_link = refLink.attr('href');
    var imagesrc[i] = chrome.extension.getURL('image.png');
    jQuery.ajax({
        url: some_link,
        dataType: "html",
        cache: false,
        success: function (data) {
            href = jQuery(data).find('#link_i_want').attr('href');
            var linked_image = '<a href="' + href + '"><img src="' + imagsrc + '"></a>';
            jQuery(linked_image).insertAfter(refLink);
        }
    });
};

var href, imagesrc = [];

jQuery(function ($) {
    $('#list_of_links li').each(function (i) {
        ajaxLoop(i);
    });
});

Answer 2

如果不对此进行测试，我认为您的问题可能是：

当您运行锁定步骤时， refLink将始终具有您想要的值。 但是，当您更快地通过循环进行异步处理时，因此在运行ajax调用时refLink会发生变化。 您需要为每个呼叫捕获该值。

一个可能的解决方法是放入另一个函数来进行ajax调用，以便捕获所需的值。

另一个问题是link在哪里获得价值？

我假设，如果您在浏览器的开发人员工具中查看网络流量，您会看到所有请求都发送了，但是处理很麻烦。