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一起使用以加快页面加载并阻止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在哪里获得它的价值？

我假设如果你在浏览器的开发者工具中查看网络流量，你会看到所有的请求，但这是处理失误。

jQuery中的多个AJAX调用每个循环在异步为真时导致错误

更新

2 个答案: