前循環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屬性的相關列表進行排序，並進行相應顯示。 希望它能幫助您朝正確的方向開始。