What is the best way to trigger an API call using AJAX whenever the page loads and at regular intervals using `setInterval()` function?

Question

What is the best way to trigger an API call using AJAX whenever the page loads and at regular intervals using `setInterval()` function?

New to coding and seeking guidance:
I have a basic AJAX feature in my project that triggers a GET API request 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>

Currently, this setup is functioning correctly. It successfully fetches data from my NodeJS server code every three seconds after the page has finished loading. However, I am looking to enhance it so that the values are also fetched upon page load, and then continue to update every three seconds thereafter. Can anyone advise on how to achieve this?

javascript ajax

Answer 1

Answer №1

Transform your code into a function and utilize setTimeout to run it on page load as well as every 3 seconds:

<head>
  <script>
    function fetchData() {
      $.get('/data_one', function(response) {
        $('#data_one').text(response);
      });
      $.get('/data_two', function(response) {
        $('#data_two').text(response);
      });

      setTimeout(fetchData, 3000);
    }

    fetchData();
  </script>

This approach ensures that your function will execute itself at intervals of 3 seconds without relying on the domready event.

Answer 2

Transform your code into a function and utilize setTimeout to run it on page load as well as every 3 seconds:

<head>
  <script>
    function fetchData() {
      $.get('/data_one', function(response) {
        $('#data_one').text(response);
      });
      $.get('/data_two', function(response) {
        $('#data_two').text(response);
      });

      setTimeout(fetchData, 3000);
    }

    fetchData();
  </script>

This approach ensures that your function will execute itself at intervals of 3 seconds without relying on the domready event.

Answer 3

Answer №2

Here is my preferred approach:

<script>
var retrieveData = function() {
    $.get('/data_one', function(response) {
        $('#data_one').text(response);
    });
    $.get('/data_two', function(response) {
        $('#data_two').text(response);
    });
};

$(document).ready(
    function() {
        retrieveData();
        setInterval(retrieveData, 3000);
    }
);
</script>

Answer 4

Here is my preferred approach:

<script>
var retrieveData = function() {
    $.get('/data_one', function(response) {
        $('#data_one').text(response);
    });
    $.get('/data_two', function(response) {
        $('#data_two').text(response);
    });
};

$(document).ready(
    function() {
        retrieveData();
        setInterval(retrieveData, 3000);
    }
);
</script>

Answer 5

Answer №3

Organize your AJAX call by creating a separate function for it:

function fetchValues() {
    $.get('/value_one', function(res) {
        $('#value_one').text(res);
    });

    $.get('/value_two', function(res) {
        $('#value_two').text(res);
    });
 }

Then, incorporate this function in the setInterval method and once the document has fully loaded like so:

<script>

    //define AJAX request as its own function
    function fetchValues() {
        $.get('/value_one', function(res) {
            $('#value_one').text(res);
        });

        $.get('/value_two', function(res) {
            $('#value_two').text(res);
        });
    }

    //execute after page load
    fetchValues();

    $(document).ready(
        //use setInterval to periodically call the function
        setInterval(fetchValues, 3000);
    );
</script>

Answer 6

Organize your AJAX call by creating a separate function for it:

function fetchValues() {
    $.get('/value_one', function(res) {
        $('#value_one').text(res);
    });

    $.get('/value_two', function(res) {
        $('#value_two').text(res);
    });
 }

Then, incorporate this function in the setInterval method and once the document has fully loaded like so:

<script>

    //define AJAX request as its own function
    function fetchValues() {
        $.get('/value_one', function(res) {
            $('#value_one').text(res);
        });

        $.get('/value_two', function(res) {
            $('#value_two').text(res);
        });
    }

    //execute after page load
    fetchValues();

    $(document).ready(
        //use setInterval to periodically call the function
        setInterval(fetchValues, 3000);
    );
</script>

Answer 7

Answer №4

It has been shown in this discussion that to initiate the interval immediately, both setInterval and the function should be called.

<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>

Personally, I believe the optimal approach is to initially render the data from the server and then utilize an interval to update it every 3 seconds. This can be achieved with the help of ejs.

Furthermore, I suggest refreshing not every 3 seconds, but rather 3 seconds after the last update (following a response from the server).

Answer 8

It has been shown in this discussion that to initiate the interval immediately, both setInterval and the function should be called.

<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>

Personally, I believe the optimal approach is to initially render the data from the server and then utilize an interval to update it every 3 seconds. This can be achieved with the help of ejs.

Furthermore, I suggest refreshing not every 3 seconds, but rather 3 seconds after the last update (following a response from the server).

What is the best way to trigger an API call using AJAX whenever the page loads and at regular intervals using `setInterval()` function?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Starting a line series from the beginning of the y-axis on a bar chart using chart.js

Is there a way for me to choose all the classNames that conclude with a specific word within the MUI sx property?

Issue with React-Native FlatList's scrolling functionality

Having trouble with the initial tap not being recognized on your mobile browser?

Tips for modifying string in key-value pairs on the client side (example using Paypal checkout demo)

Finding the number of parameters in an anonymous function while using strict mode can be achieved through which method?

What is the process for populating a checkbox with data from a configuration file using JavaScript?

Building a Next.js application that supports both Javascript and Typescript

Tips for Retrieving the Key Names of JSON Objects within a JSON Array

What steps can be taken to properly display dateTime values in a data table when working with JavaScript (VueJS) and PHP (Laravel)?

Using JavaScript, is there a way to modify a JSON parameter within an API?

Steps to stop mat-spinner upon receiving Job Success/Failure Notification from the backend

Obtaining the ID from a URL in node.js

Just started learning php.mysqli and facing challenges with a select query

What is the recommended sequence for using decorators in NestJS: @Body(), @Params(), @Req(), @Res()?

Arrange the table by adding and editing before and after appending

"JQuery event handlers not functioning as expected: .click and .on failing

"Troubleshooting the slow loading of PDF files when using React's render-pdf feature

How to shuffle the elements of an array saved in a JSON file using discord.js

Receiving binary information through enyo.Ajax