Make a while loop delay repeating until ajax calls in it are complete

So. I said in comments, that you could use async/await, and gave links. Now I am going to try to teach you how to work with promises and XMLHttpRequest.

So first thing. I would use my own 'library' (not really a library, just 3 new command) called PromiseReq which has XMLHttpsRequest that returns Promises. You would need two functions from it: sendToServer(config, data) and getServerFile(config). They do what their names implies.(sendToServer is not so good at the time, but I will improve it sometime later). They just use Promises as returns. They work in very easy way. Code @ Github

BUT It was designed for my uses only, so it is not very flexible (although I hope I will improve it sometime).

So we need to learn how to use Promises.

Firstly you need to know what Promise is and why do we use it.

Then you can create one like this:

let pmq = new Promise((res,rej)=>{
// PROMISE BODY HERE
});

Here first warning. Promises made that way don't support return as a way to resolve Promise! You have to use res()!

Some functions just return them (such as fetch()) and we can handle them right after calling function.

Now pmq will be our promise. You can use pmq.then(callback) to handle what will happen if somewhere in promise body is res() call and pmq.catch(callback) to handle what happens when rej() is called. Remember, that .catch(cb) and .then(cb) returns a Promise, so you can safely chain more than one .then() and at the end add .catch() and it will handle rejection from every one of .then()s.

For example:

pmq = fetch("file.txt");
pmq.then(e=>console.log(e.json())).then(console.log).catch(console.error);

There is a big note there.

The order in which this events will fire.

If for example rP() waits 1s than logs "A" then resolves, this code:

let a = rP();
a.then(_=>console.log("B")).catch(console.error);
console.log("C");

will result in:

C
A
B

Becuase of this there is async/await needed to do this.

To do so you have to make an async function with keyword async.

let fn = async ()=>{} 

Here is second thing. Async functions ALWAYS return Promise. And that is the second way you can create a promise. You just don't use res(), rej() only return and throw.

Now we can call inside fn():

let a = await rP().then(_=>console.log("B")).catch(console.error);
console.log("C");

and we will get our

A
B
C

Now. How to use it with XMLHttpRequest?

You need to create new Promise with simple XMLHttpRequest inside:

let xmlp = (type, path,data) => return new Promise((res,req)=>{
    let xhr = new XMLHttpsRequest();
    xhr.open(type, path, true); // true implies that is it asynchronous call
    //...
    xhr.send(data);
});

And now when to resolve? XMLHttpRequest has useful event properties and events. The one that is best for our case is onreadystatechange.

You can use it like so:

xhr.onreadystatechange = _=>{
    if(xhr.readyState === 4 && xhr.status === 200) // Everything went smoothly
        res(xhr.responseText);
    else if(shr.readyState === 4 && xhr.status !== 200) // Something went wrong!
        rej(xhr.status);
}

And then to get data you can either

1. Async/Await

// INSIDE ASYNC FUNCTION
let resData = await xmpl("GET", "path.txt", null).catch(console.error);

2. .then()

let resData;
xmpl("GET", "path.txt", null).then(r=>{
    resData = r;
    // REST OF WHOLE FUNCTION TO ENSURE THAT resData HAS BEEN SET
})
.catch(console.error);

You can also send data with xmpl().

xmpl("POST", "observer.php", "Data to send to observer.php!")
.then(whatToDoAfterSendFN);
/* 
to get such data in PHP you have to use 
$post = file_get_contents('php://input');
*/

I know that this answer is a bit messy and stuff, but I didn't have any idea how to write it :P Sorry.