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

Multiple AJAX calls in jQuery each loop causing error when async is true

本文关键字：错误 异步 调用 循环 AJAX jQuery      更新时间：2023-09-26

我正在创建一个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，因为我太快地发出了太多请求。现在我试图发现的是是否有办法防止这种情况发生。

未测试，但我会尝试 

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

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

当您运行锁步时，refLink将始终具有您想要的值。 但是，当您进行异步翻录时，可以更快地通过循环refLink因此在运行 ajax 调用时会发生变化。 您需要为每次调用捕获该值。

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

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

我假设如果您查看浏览器开发人员工具中的网络流量，您会看到所有请求都消失了，但处理出了问题。

相关文章：