jQueryのは、非常に長い時間後に結果を表示

Question

（私はIE8とし、上記の互換性を持っているので）、私はjQueryの1.12.4を使用していますし、これは私のコードです：

$(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を受けるべきですWikipediaのファイルで、カテゴリに50ページ分の情報があります。それは20のランダムなページを選択し、ウィキペディアのページID：ウィキペディアのページタイトルペアで連想配列を記入します。

その仕事はしますが、結果は10秒後にのみ表示されます。 誰でも私を説明することができます、まず、なぜ、そして、そして、これを修正する方法？ ありがとう、私はjQueryの世界では非常に新しいです。

Answer 1

あなたは膨大な回数のループを繰り返すので時間がかかります（その回数は、ページIDが高くなるほど大きくなりますが、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); 
    }); 
}); 

Answer 2

Lanceで述べたように、ループは効率が悪く、ループの繰り返し回数が増えるほど遅くなります。私が作った別の変更は、あなたのrandomTitlesを配列からオブジェクトに変更することでした。このオブジェクトは、配列がWikipediaの結果の中の最大の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>

Answer 3

、私はあなたのrandomTitlesを観察："pageid": 419280が飛び降りたら

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

ものundefined*32901はrandomTitles[pages[index].pageid]によって引き起こされ、それはあなたのrandomTitles配列にundefinedアイテムの膨大な量を作成大きなギャップ。問題を解決するには

、あなたはそれを変更することができます：あなたはブレークポイントを設定し、何が長い除外よりもかかっているかどうかを確認するために、コードをウォークスルーすることができます

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