CODEWITHSUNDEEP
javascriptnode.jselectron
bob dylan
bob dylan

Reputation: 1109

Run asynchronous commands in a webpage with node.js / electron / javascript

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(){
 ...
}

Upvotes: 1

Views: 774

Answers (2)

JSON Derulo
JSON Derulo

Reputation: 17522

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

Upvotes: 0

nick zoum
nick zoum

Reputation: 7285

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

Upvotes: 2

Related Questions