javascript - jQuery 在很长一段时间后显示结果

Question

我使用的是 jQuery 1.12.4(因为我必须兼容 IE8 及以上版本)，这是我的代码:

$(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 个随机页面，并用维基百科页面 ID:维基百科页面标题对填充关联数组。

它完成了它的工作，但结果大约在 10 秒后才会显示。任何人都可以首先向我解释为什么，然后如何解决这个问题？谢谢，我对 jQuery 世界很陌生。

Answer 1

正如 Lance 所提到的，您的循环效率低下，并且循环迭代次数越多，速度就越慢。我所做的另一个更改是将 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>