Запускайте асинхронные команды на веб-странице с помощью node.js / Electron / Javascript

Question

РЕДАКТИРОВАНИЕ: использование BrowserWindow.

Какой самый простой / лучший способ запуска команд javascript на веб-странице одна за другой?(асинхронный, не синхронный)
Например, несколько document.write вызвано событием keypress.

document.write("line 1");
wait_for_key_press();
document.write("line 2");
wait_for_key_press();
document.write("line 3");
wait_for_key_press();
document.write("line 4");
...

function wait_for_key_press(){
 ...
}

Answer 1

Самый простой способ дождаться действия перед выполнением кода - использовать обещания или прослушиватели событий (или оба). Например:

var resolves = [];

document.querySelector("#start").addEventListener("click", doActions);
document.querySelector("#stop-wait").addEventListener("click", function() {
  resolves.forEach(function(resolve) {
    resolve();
  });
  resolves = [];
});

function waitButtonClick() {
  return new Promise(function(resolve) {
    resolves.push(resolve);
  });
}

function doActions() {
  console.log("Step 1");
  waitButtonClick().then(function() {
    console.log("Step 2");
  });
}

<button id="start">Start Actions</button>
<button id="stop-wait">Stop waiting</button>

То же самое можно сделать, используя await и async:

var resolves = [];

document.querySelector("#start").addEventListener("click", doActions);
document.querySelector("#stop-wait").addEventListener("click", function() {
  resolves.forEach(function(resolve) {
    resolve();
  });
  resolves = [];
});

function waitButtonClick() {
  return new Promise(function(resolve) {
    resolves.push(resolve);
  });
}

async function doActions() {
  console.log("Step 1");
  await waitButtonClick();
  console.log("Step 2");
}

<button id="start">Start Actions</button>
<button id="stop-wait">Stop waiting</button>

Promise, async и await реализованы только в современных браузерах и узлах (что должно соответствовать вашему случаю, поскольку вы используя электрон). Если вы также хотите поддерживать IE, вы можете создать пользовательский Promise polyfill:

if (typeof window["Promise"] !== "function") {
  window["Promise"] = function(callBack) {
    var catchList = [];
    var thenList = [];
    this.then = function(callBack) {
      if (typeof callBack === "function") thenList.push(callBack);
      return this;
    };
    this.catch = function(callBack) {
      if (typeof callBack === "function") catchList.push(callBack);
      return this;
    };

    function resolve(result) {
      thenList.forEach(function(callBack) {
        callBack(result);
      });
    };

    function reject(error) {
      catchList.forEach(function(callBack) {
        callBack(error);
      });
    };
    callBack(resolve, reject);
  };
}

Answer 2

Это возможно с синтаксисом async / await . Чтобы дождаться нажатия клавиши, добавьте прослушиватель событий к событию keypress. В этом примере строка 2 печатается, когда пользователь нажимает клавишу ввода.

async function myProgram() {
  console.log('line 1')
  await myAsyncFunction();
  console.log('line 2');
}
myProgram();

async function myAsyncFunction(){
 return new Promise((resolve) => {
  document.addEventListener('keypress', function _listener(event) {
    if (event.keyCode === 13) {
      document.removeEventListener('keypress', _listener);
      resolve();
    }
  });
 });
}