Is there a pre-existing function that can handle calling a JavaScript function asynchronously after the onload event has finished

Question

Is there a pre-existing function that can handle calling a JavaScript function asynchronously after the onload event has finished

I am in need of converting a javascript function that currently uses XMLHttpRequest() to perform a synchronous data fetch from the server into an asynchronous one. The function currently caches the data received to avoid multiple fetches. However, when attempting to switch to asynchronous fetching, the data is not returned in time for the callers to retrieve it. This has led to consideration of ways around the issue, such as firing functions in an onload list after the load is completed. While the synchronous method currently works fine, it is deprecated and not recommended. This has prompted the search for alternative mechanisms. One idea is to modify the XMLHttpRequest() function to track calls from other functions and handle the necessary actions once the data is received. This could involve breaking calling functions into two parts - one for requesting the data and another for handling actions post-data retrieval. Despite the potential solution, the process seems cumbersome and there may be a better way yet to be discovered. The current code snippet demonstrates the synchronous method:

    var xmlhttp;
    var dn = window.location.hostname;
    var srcURL = "http://"+dn+"/unpublished/latest/this.txt";
    if (window.XMLHttpRequest)
    {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("POST", srcURL, false);
    xmlhttp.setRequestHeader("Content-type",
     "application/x-www-form-urlencoded");
    xmlhttp.send("fname=Who&lname=Cares");
    if (xmlhttp.readyState == 4 && xmlhttp.status==200)
    {
      var siteData = xmlhttp.responseText;
      . . .

The asynchronous version, which works in fetching the data but poses timing issues for some callers, bears resemblance to the synchronous method. Here is a snippet of the asynchronous code:

if (window.XMLHttpRequest)
{
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//callback function for the AJAX request
xmlhttp.onreadystatechange = function()
{
  if (xmlhttp.readyState == 4 && xmlhttp.status==200)
  {
    var siteData = xmlhttp.responseText;
... etc ...

Lastly, an example of the callers to the function getSiteData() is shown below:

  <script type = "text/javascript">
    function setLinkToContact(objId)
    {
      document.getElementById(objId).setAttribute('href',
       getSiteData('contact'));
    }
  </script>

There are numerous callers for the "getSiteData()" function.

javascript ajax function asynchronous synchronous

Answer 1

Answer №1

After carefully reviewing your inquiry, I have come to understand that multiple pages necessitate data retrieval from an asynchronous function call. Each page has distinct data requirements that rely on the asynchronous callback.

If my understanding is correct, I would like to suggest an approach for you to consider.

Before initiating the async request, at the beginning of each page, create an empty global function on each page.

window.myAsyncCallback = function(){}

Each page should have a function designated to handle the async callback.

For page1:
var handleCallback1 = function(data){
    // unique handler 1
}

For page2:
var handleCallback2 = function(data){
// unique handler 2
}

Assign the handlers handleCallback1 and handleCallback2 to myAsyncCallback.

window.myAsyncCallback = handleCallback1;
window.myAsyncCallback = handleCallback2;

Then, within your onreadystatechange function, execute window.myAsyncCallback(data) with the data. Each specific implementation will activate when the data becomes available. You can now utilize the data as needed.

**********UPDATE UPDATE********

Is it possible for you to modify calls to “getSiteData(‘contact’)? If yes, you may want to consider utilizing the getSiteData.call() function and passing a reference to the DOM element requiring network data. Inside getSiteData, set the element’s dataset value. Keep track of the element in an array so you can retrieve it after the network request is completed. Then iterate through the elements list, check their value, and update as necessary since you have a reference to the DOM element.

If altering the caller function is not an option, you could explore Function prototyping. Although refactoring may require significant effort, it appears to be the best solution to prevent race conditions. If you refactor for asynchronous operations, function callbacks should suffice without delving into Promises and EventListeners; although both options are still viable, callbacks are more streamlined for your requirements.

I am intrigued to learn how you resolve this issue. Please keep me informed if feasible.

<title></title>
    <script>
        var elements = [];

        var getSiteData = function(elem, value){
            // set element data
            elem.dataset = value;

            // store
            elements.push(elem);

            // simulate async request
            setTimeout(function(){

                var xmlHttpData = {
                    "contact":"http://www.yahoo.com",
                    "contacttwo":"http://www.google.com"
                }

                linklist.forEach(function(element, index, arr){
                    // match dataset value in element to xmlHttpData. 
                    //element.dataset.value 
                })

            },3000);

        }

        function setLinkToContact(objId){
            document.getElementById(objId).setAttribute('href', 
            getSiteData.call(document.getElementById(objId),'contact'));
        }

    </script>

<body>
    <a id="link" href="">my link</a>
    <div id="linktwo">my link</a>
    <script>
        setLinkToContact('link');
        setLinkToContact('linktwo');
    </script>
</body>

Answer 2

After carefully reviewing your inquiry, I have come to understand that multiple pages necessitate data retrieval from an asynchronous function call. Each page has distinct data requirements that rely on the asynchronous callback.

If my understanding is correct, I would like to suggest an approach for you to consider.

Before initiating the async request, at the beginning of each page, create an empty global function on each page.

window.myAsyncCallback = function(){}

Each page should have a function designated to handle the async callback.

For page1:
var handleCallback1 = function(data){
    // unique handler 1
}

For page2:
var handleCallback2 = function(data){
// unique handler 2
}

Assign the handlers handleCallback1 and handleCallback2 to myAsyncCallback.

window.myAsyncCallback = handleCallback1;
window.myAsyncCallback = handleCallback2;

Then, within your onreadystatechange function, execute window.myAsyncCallback(data) with the data. Each specific implementation will activate when the data becomes available. You can now utilize the data as needed.

**********UPDATE UPDATE********

Is it possible for you to modify calls to “getSiteData(‘contact’)? If yes, you may want to consider utilizing the getSiteData.call() function and passing a reference to the DOM element requiring network data. Inside getSiteData, set the element’s dataset value. Keep track of the element in an array so you can retrieve it after the network request is completed. Then iterate through the elements list, check their value, and update as necessary since you have a reference to the DOM element.

If altering the caller function is not an option, you could explore Function prototyping. Although refactoring may require significant effort, it appears to be the best solution to prevent race conditions. If you refactor for asynchronous operations, function callbacks should suffice without delving into Promises and EventListeners; although both options are still viable, callbacks are more streamlined for your requirements.

I am intrigued to learn how you resolve this issue. Please keep me informed if feasible.

<title></title>
    <script>
        var elements = [];

        var getSiteData = function(elem, value){
            // set element data
            elem.dataset = value;

            // store
            elements.push(elem);

            // simulate async request
            setTimeout(function(){

                var xmlHttpData = {
                    "contact":"http://www.yahoo.com",
                    "contacttwo":"http://www.google.com"
                }

                linklist.forEach(function(element, index, arr){
                    // match dataset value in element to xmlHttpData. 
                    //element.dataset.value 
                })

            },3000);

        }

        function setLinkToContact(objId){
            document.getElementById(objId).setAttribute('href', 
            getSiteData.call(document.getElementById(objId),'contact'));
        }

    </script>

<body>
    <a id="link" href="">my link</a>
    <div id="linktwo">my link</a>
    <script>
        setLinkToContact('link');
        setLinkToContact('linktwo');
    </script>
</body>

Is there a pre-existing function that can handle calling a JavaScript function asynchronously after the onload event has finished

Answer №1

Similar questions

What is the best way to query based on a nested object property in Mongoose?

Why do two date type variables have identical content?

issues encountered with sending a multidimensional array using ajax, specifically with the index[0]

Maintain the state of the previous page in Vue to ensure continuity

Troubleshooting: Issue with Dependency Injection functionality in Angular 2 starter project

The issue of losing session data in Laravel 4 due to multiple AJAX requests

How can I switch to another screen from the menu located within my Parent Component?

Instructions on creating a solid wall in Three.js using boxGeometry to prevent objects from passing through

Creating a serial number in a Class without relying on a global variable is a useful technique that

Can you explain the concept of themes in Material UI?

Guide on how to have two controllers execute identical tasks in Angular while modifying the appearance of the website

Encountering difficulties loading a Partial View using a JQuery ActionResult request in ASP.NET Core

combine multiple select options values in a single function using jQuery

Saving a MongoDB document within an array in Node.js and retrieving it

Merge two arrays together in Javascript by comparing and pairing corresponding elements

vuejs default properties initialized with vue-i18n

Tips for sending data to a server in an object format using the POST method

Leverage PHP variables within AJAX requests

Activate the drop-down division when the search box is in focus with xoxco technology

Embed an array within a div using JavaScript