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

Обновлено: используя 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(){
 ...
}

попробуй оповещение или приглашение

Vadim Hulevich 10.04.2019 14:09

Если они синхронны, это происходит автоматически — они по своей сути будут запускаться один за другим. Я не уверен, что понимаю вопрос.

Amunium 10.04.2019 14:10

"один за другим ?" подразумевает, что вы хотите асинхронный

KR34T1V 10.04.2019 14:10

вы должны дождаться звонка wait_for_key_press

nick zoum 10.04.2019 14:11

извините, отредактировал, я имел в виду обратное :P

bob dylan 10.04.2019 14:12

@bobdylan код должен быть в этом формате? Об использовании Promise не может быть и речи? например: do1(); wait().then(() => {do2(); do3();});

nick zoum 10.04.2019 14:13
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
6
600
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

async function myProgram() {
  console.info('line 1')
  await myAsyncFunction();
  console.info('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();
    }
  });
 });
}

На самом деле мне нужно, чтобы каждая строка запускалась нажатием клавиши (отредактированный исходный пост)

bob dylan 10.04.2019 14:18
Ответ принят как подходящий

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

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.info("Step 1");
  waitButtonClick().then(function() {
    console.info("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.info("Step 1");
  await waitButtonClick();
  console.info("Step 2");
}
<button id = "start">Start Actions</button>
<button id = "stop-wait">Stop waiting</button>

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

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

Удивительно, я смог адаптировать вариант с ожиданием/асинхронностью. Спасибо !

bob dylan 10.04.2019 14:35

Рад, что смог помочь @bobdylan. Я также только что обновил свой ответ, включив в него то, что вам следует делать, если вам нужно реализовать что-то подобное в IE или других старых браузерах.

nick zoum 10.04.2019 14:39

@bobdylan Я думаю, вам также следует взглянуть на этот вопрос относительно забытых обещаний.

nick zoum 10.04.2019 14:49

Другие вопросы по теме

Похожие вопросы

Есть ли способ получить из DOM разные значения параметра?
Momentjs: как преобразовать дату/время одного часового пояса в дату/время UTC
Обнаружение ошибки core.js: 15723 ERROR TypeError: невозможно прочитать свойство toLowerCase неопределенного значения в Angular 7
Как получить работающий таймер обратного отсчета с кнопкой, добавляющей +1 к счетчику после каждого нажатия
Функция vb.net JS, определенная в голове, не определена в onLoad
С# строка datetime utc и z при использовании в javascript
UnhandledPromiseRejectionWarning: отклонение необработанного обещания (идентификатор отклонения: 1): ReferenceError: RegistrationTokens не определен
Деструктуризация API https://randomuser.me/api/ для захвата заголовка, фамилии и имени, а также большой фотографии профиля пользователя, возвращаемого API
Как предотвратить исчезновение модального окна при блокировке экрана на Android?
Как вызвать событие onCheck для дочерних узлов в Kendo TreeView, когда родитель проверен