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

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

Answer 1

正如Lance所提到的，你的循环效率很低，并且你经历的循环迭代次数越来越慢。我做的另一个改变是将randomTitles从一个数组更改为一个对象，这会阻止你的数组变得像维基百科结果中最大的ID一样大。

＆＃13;

 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);
    });

＆＃13;

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

＆＃13;

Answer 2

这需要很长时间，因为你要循环很多次（这个次数被定义为你的页面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 3

通过控制台，我观察了你的randomTitles：

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

那些undefined*32901是由randomTitles[pages[index].pageid]引起的，一旦undefined跳出很大的差距，它会在randomTitles数组中创建大量的"pageid": 419280项。

要解决此问题，您可以将其更改为：

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

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

3 个答案: