javascript - 当我清楚地看到页面上存在该元素时，无法确认该元素是否存在

Question

我正在使用一个利用 jQuery 的函数来从 JSON 提要中获取信息。这里的问题是，我必须从 feed 中选择 10 个符合去年标准的项目(为了论证，距请求 310 亿毫秒)，并且我必须使用变量指定我想要从 feed 中获得多少个结果插入到 URL 中的“maxRows”。这是函数...

function topTen(rows) {
    $.getJSON("http://ws.geonames.org/earthquakesJSON?north=90&south=-90&east=-180&west=180&maxRows=" + rows, 
        function(json) {
            var topTen = new Array();
            var now = new Date();
            var i;
            for(i = 0; i < json.earthquakes.length; i++)
            {
                var time = json.earthquakes[i].datetime;
                var then = new Date(time.replace(" ", "T"));
                if(now - then < 31536000000) { topTen.push(json.earthquakes[i].eqid); }
            }
            if(topTen.length >= 10)
            {
                var html = "The Top Ten Earthquakes Of The Past Year<ol>";
                for(i = 1; i <= 10; i++)
                {
                    html += "<li id='number" + i + "' >" + topTen[i - 1] + "</li>";
                }
                html += "</ol>";
                $('#top_ten').html(html);
            }
        });
}

现在的问题是，从第一个请求开始，我很可能不会得到 10 个符合我的标准的结果。因此，为了解决这个问题，我尝试将函数放入循环中，直到满足另一个条件。然而，这总是会失败，因为 getJSON 函数(或者可能是回调)是异步的，这意味着如果我尝试类似

    var rows = 10;
    do{
        topTen(rows);
        rows += 10;
    while(!document.getElementById("number10"))

然而，问题就变成了，执行实际工作的函数不受循环的逐行计时的约束，因此在任何函数实际完成之前，循环本身会运行很多很多很多次并且满足循环条件。所以现在我正在尝试设计另一种类似这样的方法

    topTen(rows);
    rows += 10;
    pause(1000);
    topTen(rows);
    rows += 10;
    pause(1000);
    topTen(rows);
    rows += 10;
    pause(1000);
    if(document.getElementById("number10"))
        alert("There's 10!");
    else
        alert("There's not 10!");

暂停基本上就是听起来的样子，持续时间为几毫秒。在我复制和粘贴的循环中对初始日期对象与后续日期对象进行简单比较。这样做可以防止函数一个接一个地立即触发，但问题就变成了永远不会满足 if 条件。我不知道它是什么，但无论我允许暂停多少时间，getElementById 函数似乎永远找不到 id 为“number10”的元素，即使我可以在 Firebug 中非常清楚地看到它。

由于这个问题，我的浏览器已经崩溃好几次了，我真的很沮丧并且厌倦了它。如果有人能找到这个问题的解决方案，或者甚至提出一个更简单、更优雅的解决方案，我将永远感激不已。

PS - 我已经尝试过诸如全局变量之类的方法，并使用递归从回调函数内部调用 topTen() 并发送更大的“行”变量，但这些不起作用，因为回调函数似乎是在他们自己封闭的小世界里，我的 javascript 其余 90% 都不存在。

Answer 1

你这样做的方式是错误的......

您需要等待一次调用返回才能再次调用。幸运的是，您已经有一个正在调用并返回的函数。因此，对该函数进行简单的更改即可完成。

var topTenList = new Array();


function topTen(rows) {
    $.getJSON("http://ws.geonames.org/earthquakesJSON?north=90&south=-90&east=-180&west=180&maxRows=" + rows, 
        function(json) {
            var now = new Date();
            var i;
            for(i = 0; i < json.earthquakes.length; i++)
            {
                var time = json.earthquakes[i].datetime;
                var then = new Date(time.replace(" ", "T"));
                if(now - then < 31536000000) { topTenList.push(json.earthquakes[i].eqid); }
            }
            if (topTenList.length < 10)
            {
               topTen(rows+10);
               return;
            }
            else
            {
                var html = "The Top Ten Earthquakes Of The Past Year<ol>";
                for(i = 1; i <= 10; i++)
                {
                    html += "<li id='number" + i + "' >" + topTenList[i - 1] + "</li>";
                }
                html += "</ol>";
                $('#top_ten').html(html);
            }
        });
}