How to have AJAX fire API call on page load as well as every `setInterval()` time period?
Question
Beginner here:
I have a simple AJAX component that executes a GET API call every 3 seconds:
<script>
$(document).ready(
function() {
setInterval(function() {
$.get('/value_one', function(res) {
$('#value_one').text(res);
});
$.get('/value_two', function(res) {
$('#value_two').text(res);
});
}, 3000);
}
);
</script>
This works perfectly fine... it calls and gets value from my NodeJS server code every three seconds; As it should. But this is only after the page loads. I would like to fetch the values on page load, and every three seconds after that. How would I do that?
4 answers
solution1
0 2017-09-25 09:49:36
I would do it this way:
<script>
var loadValues = function() {
$.get('/value_one', function(res) {
$('#value_one').text(res);
});
$.get('/value_two', function(res) {
$('#value_two').text(res);
});
};
$(document).ready(
function() {
loadValues();
setInterval(loadValues, 3000);
}
);
</script>
solution2
0 2017-09-25 09:51:31
As you can see in this question , you should call both setInterval and the function if you want the interval to start immediately.
<script>
function call() {
$.get('/value_one', function(res) {
$('#value_one').text(res);
});
$.get('/value_two', function(res) {
$('#value_two').text(res);
});
}
$(document).ready(function () {
call();
setInterval(call, 3000);
});
</script>
But actually i think that the best option is to render the data for the first time from the server and then you only need interval to update the data every 3 seconds. You can use ejs for that.
Another think, i think you need to refresh 3 seconds after the last update (after the server respond), not every 3 seconds.
solution3
0 2017-09-25 09:51:44
Separate your AJAX call in a separate function:
function loadAjax() {
$.get('/value_one', function(res) {
$('#value_one').text(res);
});
$.get('/value_two', function(res) {
$('#value_two').text(res);
});
}
then use it in the setInterval and once after document is loaded as follows:
<script>
//declare ajax request as separate function
function loadAjax() {
$.get('/value_one', function(res) {
$('#value_one').text(res);
});
$.get('/value_two', function(res) {
$('#value_two').text(res);
});
}
//call once after page is loaded
loadAjax();
$(document).ready(
//use the same in setInterval
setInterval(loadAjax, 3000);
);
</script>
solution4
0 ACCPTED 2017-09-25 09:53:26
Move your code to function and to setTimeout. Call it on load and every 3 seconds:
<head>
<script>
function loadValue() {
$.get('/value_one', function(res) {
$('#value_one').text(res);
});
$.get('/value_two', function(res) {
$('#value_two').text(res);
});
setTimeout(loadValue, 3000);
}
loadValue();
</script>
That way your function will call itself every 3 seconds, no need for domready
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.