How to fire AJAX Request on Regular Interval

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

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

There are two ways to send AJAX request at a 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 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 its 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 have sent the new one.

To avoid these 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 requests constantly.

Use setInterval() when you want to send AJAX request at a particular interval every time and don’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.

If you found this tutorial helpful then don't forget to share.

15 thoughts on “How to fire AJAX Request on Regular Interval”

  1. Hi, thanks for that clear explanation. I am looking for a feasible solution to stop the repeating requests, when I want to start a new, also repeating request. At the moment I had this: But this seems not working quit well.

    function getMessages(id){

    var xhr;

    if(xhr && xhr.readyState != 4){
    xhr.abort();
    }

    xhr = $.ajax({
    url: url +’/channels/’ + id + ‘/messages’,
    type:’GET’,
    headers: {
    ‘X-Group-Token’: token,
    },
    dataType: ‘json’,
    success: showMessages, getUsers,
    });
    var interval = setInterval(xhr, 1000);
    }

    Reply
  2. Thanks for the great article.
    If I have a script and there is AJAX call every 10 seconds and the page opened by 100 users then it will create load on server.?
    Kindly guide me
    Thanks

    Reply
  3. What a fantastic post!! I just read this post. It provided me a clear understanding of how to fire ajax request on regular interval. Really a piece of good information you have shared which is very helpful for all developers. I appreciate the fact that you have explained all the information in a simple manner. Thanks for sharing such a valuable post.

    Reply
  4. Thanks for the great article.
    If I have a script and there is AJAX call every 5 seconds and the page opened by 1000 users then it will create load on server.?
    Kindly guide me
    Thanks

    Reply

Leave a Comment