Не могу подтвердить, что элемент существует на странице, когда я ясно вижу его там

Question

Я использую функцию, которая использует jQuery для получения информации из канала JSON. Проблема здесь в том, что из фида я должен выбрать 10 элементов, которые соответствуют критериям нахождения в течение последнего года (31 миллиардсекунд от запроса ради аргумента), и мне нужно указать, сколько результатов я хочу получить из фида с переменной 'maxRows', который вставляется в URL. Вот функция ...

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, похоже, никогда не находит элемент с идентификатором 'number10', хотя я очень четко вижу его в Firebug.

Я несколько раз ломал свой браузер из-за этой проблемы, и я серьезно заболел и заболел этим. Если бы кто-нибудь смог найти решение этой проблемы или даже предложить более простое и элегантное решение, я был бы бесконечно благодарен.

PS - я пробовал такие вещи, как глобальные переменные и использование рекурсии для вызова topTen () из функции обратного вызова и отправки в переменную с большими строками, но они не работают, потому что кажется, что функции обратного вызова в их собственном маленьком мире, где 90% остальной части моего javascript не существует.

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