How to run multiple asynchronous functions separately without order in JavaScript without interfering with each other?

Question

I want to know if it is possible and how can I run multiple JavaScript functions separately at the sometime without order in Client-Side.

If not possible is there a workaround for it?

Answer 1

If you just mean you want to schedule them to run in any order, that's fine, just do so (with setTimeout or whatever). If they're doing things like waiting on ajax completions and such, they won't interfere with each other. If they're doing work in the JavaScript code, though, they'll keep the main UI thread busy when they do actually run.

If you need to do heavy JavaScript processing and want to keep the main UI thread available so the UI is responsive, you can offload the processing to web workers, which run on a separate thread from the main UI thread, concurrently.

Here's a simple web worker example (from my answer here):

The main JS file:

function order(number) {
  var w = new Worker("worker.js");
  w.addEventListener("message", function(e) {
    if (e.data && e.data.command == "log") {
      console.log(e.data.message);
    }
    w = null;
  });
  console.log("Queuing order: " + number);
  w.postMessage({command: "go", order: number});
}

function takeOrder(number, cb) {
  console.log("Preparing order: " + number + "");
  cb(number);                                       // Call the callback
}
console.log("Starting to accept order");
for (var i = 0; i < 3; i++) {
  console.log("Taking order: " + i);
  takeOrder(i, order);                              // Pass order as the callback
}
console.log("Job completed!");

worker.js:

self.addEventListener("message", function(e) {
  if (e.data && e.data.command == "go") {
    for (var i = 0; i < 1000000000; i++); // kill time
    self.postMessage({command: "log", message: "Order: " + e.data.order + " completed"});
  }
});