Как запустить несколько асинхронных функций отдельно без порядка в JavaScript, не мешая друг другу?

Question

Я хочу знать, возможно ли это и как я могу запускать несколько функций JavaScript по отдельности в какое-то время без заказа на стороне клиента.

Если это невозможно, есть ли обходной путь?

Answer 1

Если вы просто хотите запланировать их запуск в любом порядке, это нормально, просто сделайте это (с setTimeout или что угодно). Если они делают такие вещи, как ожидание завершения Ajax и тому подобное, они не будут мешать друг другу. Однако, если они выполняют работу с кодом JavaScript, они будут поддерживать основной поток пользовательского интерфейса, когда они действительно будут работать.

Если вам нужно выполнить сложную обработку JavaScript и вы хотите, чтобы основной поток пользовательского интерфейса был доступен, чтобы пользовательский интерфейс реагировал, вы можете перенести обработку на веб-работников, которые одновременно работают в отдельном потоке от основного потока пользовательского интерфейса.

Вот простой пример веб-работника (из моего ответа здесь):

Основной файл JS:

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"});
  }
});