How to fire AJAX Request on Regular Interval

There are many cases when require to update certain part of the web page on the regular basis.

For example – showing live cricket or football score, display latest news feeds,etc.

There are two ways to send AJAX request on specified time –

  • By setInterval() and
  • By setTimeout() JavaScript functions.

Both do the same work but they are reliable for certain cases, which I discuss in this tutorial.

How to fire AJAX Request on Regular Interval


Contents

  1. Using setInterval()
  2. Using setTimeout()
  3. Conclusion

1. Using setInterval()

setInteval()

It repeatedly calls the function on the given interval for stop you need to clear the interval using clearInterval() or close the window.

Syntax –

setInterval(function, milliseconds);

Example

Creating a function which calls the AJAX request and using this function in setInterval() and set Interval for 5 sec.

Now the function executes on every 5 seconds and fetches new data from the server.

function fetchdata(){
 $.ajax({
  url: 'fetch_details.php',
  type: 'post',
  success: function(response){
   // Perform operation on the return value
   alert(response);
  }
 });
}

$(document).ready(function(){
 setInterval(fetchdata,5000);
});

The above code works and does it job, but it has one problem –

It repeatedly executes the function even when the previous AJAX request is not successfully executed and return.

For example – If the user has on the slow network and you are sending the request on every 5 seconds but what if the previous request doesn’t complete and you has sent the new one.

To avoid this types of problems use setTimeout() function.


2. Using setTimeout()

setTimeout()

It calls the function once after the given interval. To continue the execution you need to call it again.

Syntax –

setTimeout(function,milliseconds)

Example

Using complete in AJAX to check whether the previous request successfully executed or not. If successfully executed then again define setTimeout() method.

function fetchdata(){
 $.ajax({
  url: 'fetch_details.php',
  type: 'post',
  success: function(data){
   // Perform operation on return value
   alert(data);
  },
  complete:function(data){
   setTimeout(fetchdata,5000);
  }
 });
}

$(document).ready(function(){
 setTimeout(fetchdata,5000);
});

3. Conclusion

I showed you How you can use setInterval() and setTimeout() function to send AJAX request constantly.

Use setInterval() when you want to send AJAX request at particular interval every time and doesn’t want to depend on the previous request is completed or not.

But if you want to execute the AJAX when the previous one is completed then use the setTimeout() function.

Related Post

Spread the love
  • 6
  •  
  •  
  •  
  • 2
  •  
  •  

2 Comments

  1. Dave said:

    Thanks for this, exactly what I needed!

    July 19, 2017
    Reply
  2. Alfroy said:

    Thanks!

    January 2, 2018
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *