使用 node.js / electron / javascript 在网页中运行异步命令

Question

编辑：使用BrowserWindow。

在网页中一个接一个地启动 javascript 命令的最简单/最好的方法是什么？ （异步，非同步）
例如，keypress 事件触发的多个document.write。

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

在运行代码之前等待操作的最简单方法是使用 Promise 或事件侦听器（或同时使用两者）。例如：

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