前循环XMLHttpRequest记录值混乱

Question

我需要此代码来从几个网页中找到所有URL，并在控制台中以特定顺序列出它们。 我需要列表以假URL.com/0中的URL开头，并以fakeURL.com/20结尾，并始终保持顺序。 问题在于，有时它会列出（例如）fakeURL.com/5中的URL，然后再列出来自fakeURL.com/2中的URL。

还需要在每个网页中按顺序排列-应该更接近网页顶部的URL。

是什么导致列表混乱，如何解决？

var i;
function ajaxCall (x)
{
        var xhrs = new XMLHttpRequest();                                    
        xhrs.open("get", 'http://fakeURL.com/' + x, true);
        xhrs.onload = function()
        {       
            var doc = xhrs.response;
            $(doc).find('a').each(function()
            {    

                var url = $(this).attr('href');
                console.log(url);

            });

        }
        xhrs.responseType = 'document';
        xhrs.send();
}

for(i = 0; i <= 20; i++) 
{   
    ajaxCall(i);
}

Answer 1

默认情况下， XMLHttpRequest是异步的。 因此，如果您用1,2,3，... 20（针对您的特定情况）调用ajaxCall() ，则不能保证您以相同的顺序打印URL（console.log）。

有关更多信息，请从mozilla阅读此文档。

Answer 2

尽管在for循环中递增遍历，但仍使值混乱的原因是因为XMLHttpRequest是默认情况下（即异步）的工作方式

根据官方文档 ，在异步 HTTP请求中，当请求在后台发生时，元素不会冻结，一旦获取资源，就可以使用callback函数来点击它们。

同步请求阻止了代码的执行，该代码在屏幕上产生“冻结”，并导致无响应的用户体验。

因此，在您的情况下，同步请求似乎是行之有效的方法，但它们会影响性能，并且当然可能会导致不良的用户体验。

我可以为您的情况建议一个简单的解决方法，据我了解，它只是列出URL，只是让URL以它们想要的任何方式获取。 将它们存储在数组中，并向它们添加另一个属性，称为page_id或可以帮助您确定链接顺序的属性。 因此，最外部的链接可能类似​​于：

var a = {link: "http://fakeURL.com/1", page_id: 1};

//Store such objects in a list.

对于一页上的内部链接，也让它们以任何想要的方式进行解析，然后只需在Jquery中使用.index()它们的indices与它们相关联.index() 。 从文档中 ：

 //html 
<ul>
 <li id="foo">foo</li>
 <li id="bar">bar</li>
 <li id="baz">baz</li>
</ul>

//Javascript
var listItem = document.getElementById( "bar" );
alert( "Index: " + $( "li" ).index( listItem ) );

//Outputs - Index: 1

现在，当您需要显示链接时，只需对具有page_id属性或depth属性的相关列表进行排序，并进行相应显示。 希望它能帮助您朝正确的方向开始。