Sometimes, we need to update parts of a webpage regularly. For instance, displaying live cricket or football scores, or showing the latest news feeds.
There are two ways to schedule AJAX requests:
- Using the setInterval() function
- Using the setTimeout() function
Both methods essentially do the same thing, but they’re better suited for specific situations. Let’s explore these in this tutorial.
Table of Content
1. Using setInterval()
setInteval()
The setInterval() function is used to repeatedly call a function at a specified interval. To stop this repetition, you can use clearInterval() or close the window.
Syntax –
setInterval(function, milliseconds);
Example
Creating a function that 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);
});
This code works, but it has a drawback. It keeps executing the function, even if the previous AJAX request hasn’t been completed. For instance, if a user is on a slow network and you’re sending a request every 5 seconds, what if the previous one hasn’t finished?
To avoid such issues, we can use the setTimeout() function.
2. Using setTimeout()
setTimeout()
The setTimeout() function is used to call a function once after a specified 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);
});
This approach ensures that the function is called again only if the previous AJAX request has been successfully executed.
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.
