Question

I have 2 javascript loops, one nested in the other, that does an AJAX call to the serverside. The loops generate a pair of numbers (latlng coordinates), which is then passed to the server via .getJSON() where it will be inserted into a MySQL table.

Problem: The script runs for about 6 minute, with a total of 13200 AJAX calls. In chrome’s webdeveloper tools, it says 5656/13646 requests 536.20KB/2.15MB. When I check the tables for the inserted entries, I only see 5655 rows! What happened to the rest?

JS Code

for(var i = 0; i < 110; i++) {
    var lat_current = lat_start + lat_increment * i;

    for(var j = 0; j < 120; j++) {

        // Do some calculations
        // More code here...

        // Insert LatLng into database
        $.getJSON(base_url + 'insert_latlng_to_crawl', 
            {
                lat: lat_current,
                lng: lng_current
            }, 
            function(json){
            });

    }

}   

Answer 1

You should create a javascript object, then pass it to the server and process it server-side

 var coords=Array();//Create an array to store the calculations
 for(var i = 0; i < 110; i++) {
    var lat_current = lat_start + lat_increment * i;

    for(var j = 0; j < 120; j++) {

    // Do some calculations
    // More code here...

    // append the results to the array
    coords.push({lat: lat_current, lng: lng_current});


}

//Make the ajax call to the server, sending the completed Array JSON encoded
coords= JSON.stringify(coords);
$.ajax({
  type: 'POST',//you should send big chunks of data via POST
  url: url,
  data: coords,
  success: success,
  dataType: JSON
});