Js multi-concurrency processing method recording

When the page is initialized, the loading page is displayed, and multiple Ajax concurrent requests are started to fetch the data, ending loading when each AJAX request returns. For example, a page to place orders, to query the common address information, commodity information, the city information ... These requests are asynchronous and want to wait until all data loads are complete before allowing the user to operate. One problem that can be easily encountered in this scenario is how do I control concurrency? Here are some solutions and ideas:

<!--more-->

change parallel to serial

This method can be considered if the business logic itself is serial, but the request method provided is asynchronous. This scenario is clearly not the case, which greatly reduces page performance and increases load speed.

Callback

For cases with fewer concurrent numbers, multiple nested callbacks can make your code much less readable

function Async1 () {
Do sth ...
}
function Async2 () {
Do sth ...
Async1 ();
}
ASYNC2 ();

Ajax changed to sync

If you set the async parameter to False in jquery

$.ajax ({
URL: "/jquery/test1.txt",
Async:false
});

Set End Identity

Simple to set the counter, each completes an asynchronous function plus 1, or set an array, every execution of an asynchronous function to update the array.

Callback Count

var cnt = 0;
function Async1 () {
Do sth ...
Callback ();
}
function Async2 () {
Do sth ...
Callback ();
}
function callback () {
cnt++;
if (2==cnt) Console.log (' All has been executed ');
}

Loop blocking

var cnt = 0;
function Async1 () {
Do sth ...
cnt++;
}
function Async2 () {
Do sth ...
cnt++;
}
while (2>cnt) {}

Loop non-blocking

Do not recommend excessive use, so as not to affect performance

var cnt = 0;

function Async1 () {
Do sth ...
cnt++;
}
function Async2 () {
Do sth ...
cnt++;
}
var interval = setinterval (function () {
if (2===cnt) {
Console.log (' performed completed ');
Clearinterval (interval)
}
}, 0);

third-party framework implementation

Jquery

The way I'm currently using the project

var D1 = $. Deferred ();
var D2 = $. Deferred ();

function Async1 () {
D1.resolve ("Fish");
}

function Async2 () {
D2.resolve ("Pizza");
}

$.when (D1, D2). Done (function (v1, v2) {
Console.log (v1 + v2 + ' completed ');
});

Angular

You can refer to the instructions in the API documentation for $watch, $Q service can also implement promise.

If you define a global variable in a JS file, will there be concurrent access to the variable, causing the data to clutter up?

JS generally does not have concurrency problems, because JS is for a single user in the execution, unless your JS code to start multiple functions at the same time, to access the variable, such as:
settimeout (function 1, 1000)
settimeout (function 2, 1000)