Use Laravel Paginator with Ajax requests

Question

I have a javascript function that is gathering GeoLocation data for customers. The data source is a Laravel API:

public function GeoLocationList($officeid=NULL)
{

    $customers= Customers::where('office_id', $officeid);
    $paginate_count =  5;
    $customers= $customers->paginate($paginate_count);
    return $this->response->paginator($customers, new CustomerTransformer);
}

I am using the website GeoCod.io and am not sure what the concurrency limit is for requests, or if it will error out for other reasons at some point, so I figured I would batch them since there are several thousand records to get through.

When I was playing around with ajax requests a couple days ago I kept trying to set a timeout / sleep / delay between requests but evidently that is deprecated. I got that info from my Firefox console log and was directed to: https://xhr.spec.whatwg.org/. I didn't save the exact text of it, but it was something about user experience improvement... Whatever the intention, I couldn't figure out how to slow it down and I don't want to end up hitting their server with 5,000 requests all at once.

Here is my javascript that I am using to get the Coordinate data:

<?PHP 
$customer_json= json_encode($customers->toArray()); 
echo "var customers= ". $customer_json . ";\n";
  ?>
var results=[];
for(var i=0; i<customers.data.length; i++){
  var customer ={};

  if (customers.data[i]['address']){
    var customer_address = customers.data[i]['address'].replace(/ /g,"+") + "+";
    if (customers.data[i]['city']){
    customer_address += "+" + customers.data[i]['city'].replace(/ /g,"+");
    }
    if (customers.data[i]['state']){
    customer_address += "+" + customers.data[i]['state'].replace(/ /g,"+");

    }
    if (customers.data[i]['zip']){
    customer_address += "+" + customers.data[i]['zip'].replace(/ /g,"+");
    }
    var address = "https://api.geocod.io/v1.3/geocode?q=?" + customer_address + "&api_key=REMOVED";
    $.ajax({
        type : 'GET',
        url : address,
        dataType : "json",
        timeout: 1000,
        async: false,
        success: function(response){
          if(isEmpty(response["results"]) !=true){
            var location = response["results"][0]["location"];
            customer= { "customer_id":customers.data[i]["id"],"geo":{}};
            customer.geo = location;
            results[i]=customer;
          }
        }   
    });   
  }

}

I tried using the event handler, but it just ended up in an endless loop

var ajaxRunning = false;
for(var p=1; p<=total_pages; p++){
  if(ajaxRunning == false){
    ajaxRunning=true;
    GetCustomerList(p);
    console.log( "Starting ajax. Page: " + p );

  }else{
    console.log( "Adding ajaxStop handler. Page: " + p );

    $( document ).ajaxStop(function() {
      console.log( "Triggered ajaxStop handler. Page: " + p );
      GetCustomerList(p);
    });
  }

}
function GetCustomerList(page) {           
  $.ajax({
    type: 'GET',
      url: '{{ url('api/customers/GeoLocationList') }}/1?paginate_count=' + pagination_count + '&page=' + page,
      dataType: 'json',
      success: function (data, status, xhr) {
        console.log(data.data);
      },
      error: function(xhr) {
        swal(xhr.responseJSON.message);
      },
      cache: false
  });
}

The console spit out info like this that never ended, and we get to see the error about Synchronous requests. There are only 9 pages, but it keeps asking for page 10 which is why I got a bunch of empty arrays, but it really isn't as much the issue as much as the fact that it is looping endlessly and without waiting for it to finish between each:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/ jquery-3.2.1.min.js:4:15845
Starting ajax. Page: 1 100:1200:5
Adding ajaxStop handler. Page: 2 100:1203:5
Adding ajaxStop handler. Page: 3 100:1203:5
Adding ajaxStop handler. Page: 4 100:1203:5
Adding ajaxStop handler. Page: 5 100:1203:5
Adding ajaxStop handler. Page: 6 100:1203:5
Adding ajaxStop handler. Page: 7 100:1203:5
Adding ajaxStop handler. Page: 8 100:1203:5
Adding ajaxStop handler. Page: 9 100:1203:5
Array(1000) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
100:1218:9
Triggered ajaxStop handler. Page: 10
100:1206:7
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Triggered ajaxStop handler. Page: 10
100:1206:7
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9

How can I do my ajax calls in batches of 5-10 with a delay between?

Answer 1

Mathias from geocod.io here.

We do not have any hard rate limits in place, so individual GET requests is definitely doable.

That said, you will definitely see faster processing speeds using batch requests due to the reduced overhead.

You mentioned that you’re using Laravel. Have you considered geocoding server-side instead of client-side using JavaScript? That is often the best solution when there’s more than a couple of lookups.

Feel free to reach out to us directly through the live chat in the bottom right corner of our website, so we can help you out in real-time.