1

EDIT: using BrowserWindow.

What the simplest/best way to launch javascript commands in a webpage one after the other ? (asynchronous, not synchronous)
For example, several document.write triggered by a keypress event.

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(){
 ...
}
bob dylan
  • 989
  • 2
  • 10
  • 26

2 Answers2

2

The simplest way to wait for an action before a code is run is using promises or event listeners (or both). For example:

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>

The same can be accomplished using await and 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 and await are only implemented in modern browsers and node (which should suit your case, since you are using electron). If you also want to support IE you could create a custom 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);
  };
}
nick zoum
  • 7,216
  • 7
  • 36
  • 80
  • Amazing, i was able to adapt the one with await/async. Thanks ! – bob dylan Apr 10 '19 at 12:35
  • Glad I could help @bobdylan . I also just updated my answer to also include what you should do if you need to implement something similar in IE or other old browsers – nick zoum Apr 10 '19 at 12:39
  • @bobdylan I think you should also take a look at this [question](https://stackoverflow.com/questions/54400611/dealing-with-forgotten-promises-in-javascript) regarding forgotten promises – nick zoum Apr 10 '19 at 12:49
0

This is possible with async / await syntax. To wait for a keypress, add an event listener to the keypress event. In this example, line 2 gets printed when the user hits the enter key.

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();
    }
  });
 });
}
JSON Derulo
  • 9,780
  • 7
  • 39
  • 56