jQuery的顯示效果很長一段時間後

我使用jQuery 1.12.4（因爲我必須與IE8及以上版本兼容），這是我的代碼：jQuery的顯示效果很長一段時間後

$(document).ready(function(){ 
    var pagesUrl = "https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&list=categorymembers&indexpageids=1&cmtitle=Category%3AEnglish-language+film+directors&cmtype=page&cmlimit=50"; 
    var randomTitles = []; 
    $.getJSON(pagesUrl, function(data){ 
     var pages = data.query.categorymembers; 
     for(var i = 0; i < 20; i++){ 
      do{ 
       var index = Math.round(Math.random()*49); 
      }while(randomTitles.indexOf(pages[index].title) != -1); 
      randomTitles[pages[index].pageid] = pages[index].title; 
     } 
     console.log(randomTitles); 
    }); 
});

它應接收一個JSON來自維基百科的文件，其中有一個類別中有50頁的信息。它選擇了20個隨機頁面，並用維基百科頁面編號填充關聯數組編號：維基百科頁面標題對。

它完成它的工作，但結果僅在10秒後才顯示。任何人都可以解釋我，首先，爲什麼，然後，如何解決這個問題？謝謝，我對jQuery世界很陌生。

來源

2017-08-10 NosPix

您可以設置一個斷點，並通過代碼走走看看是否有任何花費的時間比除外。使用瀏覽器開發工具。 –

查看DevTools中的「網絡」選項卡，查看維基百科用於回答請求的時間。如果需要10秒鐘，則問題不在您的代碼中，而是在他們的最後。也許嘗試請求更少數量的頁面。如果你向他們發送了很多請求，他們可能會有一個速率限制器。 – Barmar

這需要很長的時間，因爲你循環了很多次（這個次數被定義爲無論頁面ID高而且距離很遠）。下面的代碼稍微調整你的原稿並拉下50頁，然後在20次迭代中隨機抽取20頁，所以顯然要快得多。

$(document).ready(function(){ 
    var pagesUrl = "https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&list=categorymembers&indexpageids=1&cmtitle=Category%3AEnglish-language+film+directors&cmtype=page&cmlimit=50"; 
    var randomTitles = []; 
    $.getJSON(pagesUrl, function(data){ 
     var pages = data.query.categorymembers; 
     for(var i = 0; i < 20; i++){ 
      var page = pages.splice(Math.floor(Math.random() * pages.length), 1)[0] 
      randomTitles[page.pageid] = page.title 
     } 
     console.log(randomTitles); 
    }); 
});

來源

2017-08-10 00:59:03

正如蘭斯提到的那樣，循環效率低下，循環越多，循環越慢。我做的另一個改變是將你的randomTitles從一個數組改成一個對象，這個對象可以阻止你的數組變得像維基百科結果中的最大ID一樣大。

var pagesUrl = "https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&list=categorymembers&indexpageids=1&cmtitle=Category%3AEnglish-language+film+directors&cmtype=page&cmlimit=50"; 
 
    var randomTitles = {}; 
 
    $.getJSON(pagesUrl, function(data){ 
 
     var pages = data.query.categorymembers; 
 
     for(var i = 0; i < 20; i++){ 
 
      var index = Math.floor((Math.random() * (50 - i))); 
 
      randomTitles[pages[index].pageid] = pages[index].title; 
 
      pages.slice(index, index + 1) 
 
     } 
 
     console.log(randomTitles); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

來源

2017-08-10 01:07:55 DGS

通過通過控制檯，我看到你的randomTitles：

(53029416) [undefined × 32901, "Woody Allen", undefined × 29907, "Warren Beatty", undefined × 29543, ...]

那些undefined*32901由randomTitles[pages[index].pageid]引起的，它創造了在randomTitles陣列undefined項目數額巨大，一旦"pageid": 419280躍升差距很大。

要解決這個問題，你可以把它改成：

randomTitles[i] = pages[index].title;

來源

2017-08-10 01:18:20

jQuery的顯示效果很長一段時間後

回答

相關問題