AJAX working concurrently across multiple threads

Question

AJAX working concurrently across multiple threads

After learning that JavaScript is single-threaded (as discussed in this question: If Javascript is not multithreaded, is there any reason to implement asynchronous Ajax Queuing?), I started to explore how this concept applies to my developed application. Here is a snippet of the code:

function GetSQLTable() {
        var str = $("#<%=fieldDatabaseReferences.ClientID%>")[0].value
        var res = str.split(",");
        $("#LoadingImage").show();
        $("#LoadingImage2").show();

        for (var i = 0; i < res.length; i++) {
            (function (i, res) {
                setTimeout(function () {
                    GetSQLTable2(i, res.length, res)
                }, 0);
            })(i, res);
        }
    }

function GetSQLTable2(i,reslength,res) {
            //if (i == 0)
            //{
            //    var start = new Date().getTime();
            //}
        var div = document.createElement('div');
            div.id = "div" + i
            document.getElementById('info_div').appendChild(div);

            var PossiblesPage = false;
            $.ajax({
                type: "POST",
                url: "PrimaryNominalAjax.aspx/GetSQLTable",
                data: '{username: "' + $("#<%=fieldUserName.ClientID%>")[0].value + '", terminalname: "' + $("#<%=fieldTerminalName.ClientID%>")[0].value + '", terminalip: "' + $("#<%=fieldTerminalIP.ClientID%>")[0].value + '", mappingid: "' + res[i] + '", usergroup: "' + $("#<%=fieldUserGroup.ClientID%>")[0].value + '", usn: "' + $("#<%=fieldUSN.ClientID%>")[0].value + '", requester: "' + $("#<%=fieldRequester.ClientID%>")[0].value + '", reason: "' + $("#<%=fieldReason.ClientID%>")[0].value + '", rrd: "' + $("#<%=fieldRRD.ClientID%>")[0].value + '", review: "' + $("#<%=fieldReview.ClientID%>")[0].value + '", possibles: "' + PossiblesPage + '",linkno: "", urn1: "", urn2: ""}',
                contentType: "application/json; charset=utf-8",
                timeout: 80000000,
                dataType: "json",
                success: OnSuccess(i, reslength),
                error: OnError,
                failure: function (response) {
                    alert('there was an error loading the webpage')
                }
            });
        }

The server side populates the fieldDatabaseReferences. The AJAX requests data from multiple local databases, with the information being displayed on the screen as it becomes available.

Given that the calls to various database servers are asynchronous, could this potentially have a multi-threaded effect?

javascript ajax

Answer 1

Answer №1

Did you know that JavaScript operates on a single-threaded system? This means that when asynchronous events occur, they are placed in a queue until the thread becomes idle. Let's take a look at an illustrative example:

var proceed = true;
var limit = Date.now() + 5000;    // set limit five seconds from now
setTimeout(function(){
    proceed = false;             // asynchronously set the 'proceed' variable to false
}, 1000);                       // after one second
while(proceed && Date.now() < limit); // loop until both conditions are true
console.log("proceed:", proceed);  // output 'proceed: true' (initial value)

Would you guess that the loop terminates after one second? Not quite. In reality, it would continue endlessly (if Date.now check was not included). The fact that the console logs true affirms that the timeout hasn't been triggered yet, as it patiently waits for the initial block to finish.

Regarding your scenario, the sequence of execution plays out as follows:

/* note: functions never run concurrently */
RetrieveData();
/* functions queued via setTimeout run sequentially */
RetrieveDataUpdate(0, ...);
RetrieveDataUpdate(1, ...);
RetrieveDataUpdate(2, ...);
/* AJAX responses are processed one after another, not necessarily in initiation order */
OnDataReceived(2);
OnDataReceived(0);
/* The JavaScript thread may pause during callbacks */
OnDataReceived(1);

Additional sources for understanding JavaScript timers and the event loop:

http://ejohn.org/blog/how-javascript-timers-work/

Answer 2

Did you know that JavaScript operates on a single-threaded system? This means that when asynchronous events occur, they are placed in a queue until the thread becomes idle. Let's take a look at an illustrative example:

var proceed = true;
var limit = Date.now() + 5000;    // set limit five seconds from now
setTimeout(function(){
    proceed = false;             // asynchronously set the 'proceed' variable to false
}, 1000);                       // after one second
while(proceed && Date.now() < limit); // loop until both conditions are true
console.log("proceed:", proceed);  // output 'proceed: true' (initial value)

Would you guess that the loop terminates after one second? Not quite. In reality, it would continue endlessly (if Date.now check was not included). The fact that the console logs true affirms that the timeout hasn't been triggered yet, as it patiently waits for the initial block to finish.

Regarding your scenario, the sequence of execution plays out as follows:

/* note: functions never run concurrently */
RetrieveData();
/* functions queued via setTimeout run sequentially */
RetrieveDataUpdate(0, ...);
RetrieveDataUpdate(1, ...);
RetrieveDataUpdate(2, ...);
/* AJAX responses are processed one after another, not necessarily in initiation order */
OnDataReceived(2);
OnDataReceived(0);
/* The JavaScript thread may pause during callbacks */
OnDataReceived(1);

Additional sources for understanding JavaScript timers and the event loop:

http://ejohn.org/blog/how-javascript-timers-work/

AJAX working concurrently across multiple threads

Answer №1

Similar questions

Tips for passing two parameters to an event in JavaScript

Encountering a 404 Error while using GetStaticPaths in NextJs

Start by executing the function and then proceed to upload a static file

Dynamic jQuery slideshow featuring a variety of animations applied to individual elements

"Combining multiple attributes to target elements while excluding specific classes

Remove a function tied to an element on a page that has loaded

Error: Firebase has encountered a network AuthError, which could be due to a timeout, interrupted connection, or an unreachable host. Please try again later. (auth/network-request-failed

Clicking on Rows in DataTables: Enhancing

Storing user feedback in database using ajax

utilize the useRef hook to display the total number of characters within a text area

Implementing a sorting mechanism for ajax data retrieval

Is your JQuery Gallery experiencing issues with the next button function?

Content within iframe is failing to load correctly on both Firefox and Internet Explorer browsers

Include a new key and its corresponding value to an already existing key within FormData

Could you please explain the specific distinctions between pipe and map within Angular 7?

Tips for inserting text to the left rather than the right using Jquery

What is the significance of using the variable name "$scope" in coding?

Is there a way to accomplish this without using settimeout?

Using jQuery/AJAX for nested functions, as well as utilizing the Clone and Cufon properties

What steps can I take to prevent the [Vue warn]: Potential infinite update loop detected in a component render function issue in my VueJS project?