代码之家 › 专栏 › 技术社区 › Mathias Schnell

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

asynchronous json html jquery javascript

Mathias Schnell · 技术社区 · 16 年前

我正在使用一个使用jquery的函数来从JSON提要中获取信息。这里的问题是,从提要中,我必须选择10个符合在过去一年内的条件的项(为了参数的需要,从请求中选择310亿毫秒),并且我必须指定我希望从提要中插入变量“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!");

暂停基本上就是它的声音,需要几毫秒的时间。在我复制和粘贴的循环中,将初始日期对象与后期日期对象进行简单比较。这样做的目的是防止函数一个接一个地触发,但问题是如果条件永远不满足。我不知道它是什么,但不管我允许暂停多少时间,getElementByID函数似乎从未找到ID为“数字10”的元素,尽管我在Firebug中可以很清楚地看到它。

由于这个问题,我的浏览器已经崩溃了好几次,我真的很讨厌它。如果有人能找到解决这个问题的方法,甚至能提出更简单、更优雅的解决方案,我将永远感激。

ps-我尝试过全局变量和使用递归从回调函数内部调用topten()并发送一个更大的“rows”变量,但这些方法不起作用,因为回调函数似乎位于它们自己包含的小世界中,其中90%的剩余javascript不存在。

1 回复 | 直到 16 年前

Hogan 16 年前

你这样做是错误的…

在再次呼叫之前,您需要等待一个呼叫返回。幸运的是,您已经有了一个用它调用的函数返回。所以简单地改变这个函数,你就完成了。

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