Currently, I have numerous synchronous functions that need to run one after the other, and these are basic ajax requests responsible for rendering HTML content to the DOM.
My goal is to execute all of these synchronous functions asynchronously at the same time, allowing them to complete before moving on to speed up the process. However, within a synchronous function, attempting this in JavaScript seems challenging, so I am seeking advice from the community.
My approach involved converting each synchronous request into asynchronous promises and then using a Promise.all() method to handle them. Nevertheless, waiting for promise.all().then is not ideal as the main thread will continue executing the remaining code in the synchronous function. Therefore, I'm looking for a way to halt the main thread until the asynchronous calls are completed.
Here's a brief example of what I'm facing:
var syncfunc = () => {
var getPromise = () => {
return new Promise((resolve) => {
var asyncAjaxRequest = async function() {
doSomeStuff();
resolve();
}
})
}
var promises = [getPromse(), getPromse(), getPromse()];
Promise.all(promises);
console.log('I want this console.log to execute only after all promises have finished executing doSomeStuff');
}
While I understand that .then will trigger once all promises are resolved, my objective is basically to block the synchronous thread till all asynchronous tasks are completed.
If possible, I would restructure everything according to my needs, but due to utilizing the SiteVision framework, I'm trying to add content to the DOM before a print module opens the print window. Running each function synchronously isn't efficient as it slows down the process. Disabling the print function by setting window.print = null and enabling it again upon resolution of promises didn't yield the desired results.