$ getJSON und for loop issue

Question

Dies ist eine Tabelle mit der Menge der Ergebnisse, die von der MediaWiki-API-Abfrage /api.php?action=query&list=querypage&qppage=BrokenRedirects zurückgegeben werden. Die Anzahl der Treffer wird dann beispielsweise auf die ID, hinzugefügt:

// BrokenRedirects 
$.getJSON('/api.php?action=query&list=querypage&qppage=BrokenRedirects&format=json', function (data) { 
    $('#BrokenRedirects').text(data.query.querypage.results.length); 
}); 

Aber es ist eine andere als 7 Mal wiederholt werden, habe ich die Argumente für qppage in ein Array und verwenden eine for-Schleife Gesamtcode zu verkürzen.

var array = ['BrokenRedirects', 
      'DoubleRedirects', 
      'Unusedcategories', 
      'Unusedimages', 
      'Wantedcategories', 
      'Wantedfiles', 
      'Wantedpages', 
      'Wantedtemplates']; 

for (var i = 0; i < array.length; i++) { 
    $.getJSON('/api.php?action=query&list=querypage&qppage=' + array[i] + '&format=json', function (data) { 
     $('#' + array[i]).text(data.query.querypage.results.length); 
    }); 
} 

Die erste, unlooped, Version funktioniert. Aber als ich eine Schleife hinzufügte, tat es das nicht. Der $getJSON-Teil wird ausgeführt, aber die resultierenden Daten werden dann nicht zur ID hinzugefügt. Ich lief es durch JSLint, die abgesehen von sich beschweren über Funktionen in einer Schleife und var i mit var array zurückgegeben wenig Hilfe zurückgegeben. Ich bin relativ unerfahren mit Javascript also gedacht vielleicht eine Variable kann nicht zweimal innerhalb einer Schleife verwendet werden? Abgesehen davon, vielleicht etwas mit der Verwendung einer ID innerhalb einer Schleife zu tun?

Answer 1

Das ist ein klassisches Problem: i hat den Wert von Ende der Schleife, wenn der Rückruf aufgerufen wird.

Sie können es wie folgt beheben:

for (var i = 0; i < array.length; i++) { 
    (function(i) { // protects i in an immediately called function 
     $.getJSON('/api.php?action=query&list=querypage&qppage=' + array[i] + '&format=json', function (data) { 
     $('#' + array[i]).text(data.query.querypage.results.length); 
     }); 
    })(i); 
} 

Answer 2

Sie eine Funktion wie schreiben sollte -

function callUrl(value) 
{ 
$.getJSON('/api.php?action=query&list=querypage&qppage=' + value + '&format=json', function (data) { 
     $('#' + value).text(data.query.querypage.results.length); 
    }); 
} 

und es dann mit einem gewissen Timeout Option nennen wie -

setTimeout('callUrl(+ array[i] +)',500); innerhalb der Schleife -

dh

for (var i = 0; i < array.length; i++) { 
    setTimeout('callUrl(+ array[i] +)',500); 
} 

Einige Verzögerung für jeden Anruf wird hier benötigt.

Answer 3

getJSON ist ein asynchroner ajax Anruf

REFER: use synchronous ajax calls

Answer 4

Verwenden Jquery $.each() über das Array iterieren anstelle einer for-Schleife.

Zum Beispiel:

$.each(array, function(_, value) { 
    var url = '/api.php?action=query&list=querypage&qppage=' + value + '&format=json'; 

    $.getJSON(url, function (data) { 
     $('#' + value).text(data.query.querypage.results.length); 
    }); 
});