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?

if you want to load data on page loading without any delay, you must send that data with page html to client, then activate interval. but if first delay time is not important, add your ajax part to a function and call it two times, first on page load, and second on interval — SalmanAA, Sep 25 '17 at 09:52

score 0 · Answer 1 · answered Sep 25 '17 at 09:49

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>

Leibale Eidelman · Answer 2 · 2017-09-25T10:19:22.657

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.

Deepansh Sachdeva · Answer 3 · 2017-09-25T10:01:18.300

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>

score 0 · Accepted Answer · answered Sep 25 '17 at 09:53

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

How to have AJAX fire API call on page load as well as every `setInterval()` time period?

4 Answers4