CODEWITHSUNDEEP
javascriptjquery
max7
max7

Reputation: 800

Delay between multiple ajax calls

I have 5 ajax calls that look like this (not posting all five):

tabTest = {
BASE_URL : 'http://localhost/project/',
getPics : function(){

    $.ajax({
        type : 'GET',
        url : this.BASE_URL +'js/image1.js',
        dataType : "json",
        async: false,
        success: function(data){
            var pic = data.images.image[0].image_one;
                $('#pic1 img').attr("src", pic);
        }   
    });
    $.ajax({
        type : 'GET',
        url : this.BASE_URL +'js/image2.js',
        dataType : "json",
        async: false,
        success: function(data){
            var pic = data.images.image[0].image_two;           
                $('#pic2 img').attr("src", pic);
        }   
    });
   }
};

The ajax calls do work but they all fire at once; instead, I need to put a delay between each one so they do not fire all at once but rather in order only once (upon click, which happens in a different function) with 5 seconds between each call.

I've tried using 'setTimeout' but it has not worked yet. I'm really not sure how to proceed on this one.

Upvotes: 2

Views: 7981

Answers (3)

tamilmani
tamilmani

Reputation: 591

You can use setInterval() for this. When using setInterval() it can cal the wat u mention the time for function...u check it out the seconds ...

setInterval("functionname()",50000);

Upvotes: 0

George
George

Reputation: 36784

If you put your AJAX calls its own setTimeout() there's no reason why it shouldn't work:

setTimeout(function(){
    $.ajax({
        type : 'GET',
        url : this.BASE_URL +'js/image1.js',
        dataType : "json",
        async: false,
        success: function(data){
            var pic = data.images.image[0].image_one;
            $('#pic1 img').attr("src", pic);
        }   
    });
}, 5000);

And then increment the duration by 5000 for each call. So the second would look like:

setTimeout(function(){
    $.ajax({
        type : 'GET',
        url : this.BASE_URL +'js/image2.js',
        dataType : "json",
        async: false,
        success: function(data){
            var pic = data.images.image[0].image_one;
            $('#pic2 img').attr("src", pic);
        }   
    });
}, 10000);

You could also put the functions inside the previous request's callback although a request fail would mean that all subsequent AJAX requests wouldn't get called.

Upvotes: 3

Pathik Gandhi
Pathik Gandhi

Reputation: 1344

Try to add next ajax call on previous success callback function.

$.ajax({
type : 'GET',
url : this.BASE_URL +'js/image1.js',
dataType : "json",
async: false,
success: function(data){
    var pic = data.images.image[0].image_one;
        $('#pic1 img').attr("src", pic);
   $.ajax({
      type : 'GET',
      url : this.BASE_URL +'js/image2.js',
      dataType : "json",
      async: false,
      success: function(data){
          var pic = data.images.image[0].image_two;           
              $('#pic2 img').attr("src", pic);
      }   
  });
}

});

OR 

$.ajax({
        type : 'GET',
        url : this.BASE_URL +'js/image1.js',
        dataType : "json",
        async: false,
        success: function(data){
            var pic = data.images.image[0].image_one;
                $('#pic1 img').attr("src", pic);
            call2();
        }   
    });

function call2(){
    $.ajax({
        type : 'GET',
        url : this.BASE_URL +'js/image2.js',
        dataType : "json",
        async: false,
        success: function(data){
            var pic = data.images.image[0].image_two;           
                $('#pic2 img').attr("src", pic);
        }   
    });
}

So now when the first ajax will completed then next call will fire.

Upvotes: 1

Related Questions