time delay between jQuery AJAX requests

Question

I'm built a little internal web application that looks up area code numbers. The problem I'm running into is that I have a LOT of area codes to go through. So much so that my app starts erroring out.

I want to build a timer into it so that I fire off a request every second or so, until the end of my array. Any ideas?

var phoneList = ["905XXXXXXX","905XXXXXXX","905XXXXXXX","905XXXXXXX","905XXXXXXX",...];
var phoneList_length = phoneList.length;
for(i=0; i < phoneList_length; i++){    
    $.ajax({
        url: 'http://mysite.com/webservice.php',
        dataType: 'jsonp',
        data: 'number=' + phoneList[i] + '&index=' + i,
        type: 'GET',
        timeout: 10000,
        success: function(data){
            $('.phoneReults').append('<li>' + phoneList[data.index] + '</li>');
            $('.stateReults').append('<li>' + data.region +'</li>');
            $('.cityReults').append('<li>' + data.city +'</li>');
        }
    });
}

Answer 1

function fire(request, i) {
    var phone = request.shift();
    $.ajax({
        url: 'http://mysite.com/webservice.php',
        dataType: 'jsonp',
        data: 'number=' + phone + '&index='  + i,
        etc: ...
    });
    if (request.length > 0)
        setTimeout(fire, 1000, request, ++i);
}

...
// start requests
fire(phoneLists, 0);

Answer 2

var phoneList = ["905XXXXXXX","905XXXXXXX","905XXXXXXX","905XXXXXXX","905XXXXXXX",...];
var time = 1000;
$.each(phoneList, function(index, phone) {
    window.setTimeout(function() {
        $.ajax({
            url: 'http://mysite.com/webservice.php',
            dataType: 'jsonp',
            data: { number: phone, index: index },
            success: function() {
                ...                  
            }  
        });
    }, time);
    time += 1000;
});

Answer 3

You'd better fire a request for the entire array. That will save you a lot of requests and a lot of initialization and finalization on the server side. If the array is really large, you could choose to send chunks of it (like 10 or 100 at a time).

If you still need the array after that, you can skip the for loop. Instead, make a function that calls itself in the succes handler of the request. Repeat this until a global variable reaches the end of the array.

Answer 4

Try this

var phoneList = ["905XXXXXXX","905XXXXXXX","905XXXXXXX","905XXXXXXX","905XXXXXXX",...];
var phoneList_length = phoneList.length;

var count = 0;

var timer = setInterval(function(){
  if(count != phoneList_length){
    SendPhoneList(phoneList[count]);
    count++;
  }
  else{
     clearInterval(timer);
  }
}, 1000);


function SendPhoneList(phoneList){
  $.ajax({
        url: 'http://example.com/webservice.php',
        dataType: 'jsonp',
        data: 'number=' + phoneList + '&index=' + i,
        type: 'GET',
        timeout: 10000,
        success: function(data){
            $('.phoneReults').append('<li>' + phoneList[data.index] + '</li>');
            $('.stateReults').append('<li>' + data.region +'</li>');
            $('.cityReults').append('<li>' + data.city +'</li>');
        }
    });
}

Answer 5

you can have a array of ajax request to have a serial ajax calls (you can call one by one after previous on is succeeded.). Or you can have recursive function which calls itself again after the success function triggered.