Question

我需要此代码才能从多个网页中查找所有网址，并在控制台中以特定顺序列出这些网页。我需要列表从fakeURL.com/0的URL开始，以fakeURL.com/20结束，并保持整个顺序。问题是，有时它会在来自fakeURL.com/2的URL之前列出来自（例如）fakeURL.com/5的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）。

有关详情，请参阅this documentation from mozilla

Answer 2

尽管在for循环中以递增方式遍历，但是为什么不按顺序获取值的原因是因为XMLHttpRequest默认情况下的工作方式（即异步）

从official documentation，在异步 HTTP请求中，当请求在后台发生时，元素不会冻结，一旦获取资源，您就可以点按他们使用callback函数。

同步请求阻止执行创建＆＃34;冻结＆＃34;在屏幕上和无响应的用户体验。

因此，对于您的情况，同步请求似乎是可行的，但它们会对性能产生影响，当然也可能会导致用户体验不佳。

我可以为您的案例建议的一个简单的解决方法，我理解的只是列出URL，只是让URL以他们想要的方式获取。将它们存储在一个数组中，并为它们添加另一个名为page_id的属性，或者可以帮助您识别链接顺序的属性。所以最外面的链接看起来像：

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

//Store such objects in a list.

对于一个页面上的内部链接，让它们以他们想要的方式解析，并在Jquery中使用indices将它们与.index()相关联。来自documentation：

 //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属性对相关列表进行排序，然后相应地显示它们。希望它能让你开始朝着正确的方向前进。

For-Loop XMLHttpRequest按顺序记录值

2 个答案: