Javascript пауза / ожидание; синхронное исполнение - PullRequest
Новая
       10

Javascript пауза / ожидание; синхронное исполнение

0 голосов
/ 29 января 2020

Опытный бэкэнд-программист, JavaScript noob.

Как мне написать это в JS и заставить его работать.

Цель: автоматизация утомительной задачи резервного копирования информации из site:

1) Щелкните элемент в [alerts]

2) Дождитесь загрузки данных. Обнаружение данных готово, когда появляется кнопка [сохранить]. (1-2 с)

3) Нажмите [множественный выбор], чтобы выбрать все экземпляры для оповещения.

4) Нажмите кнопку [сохранить]

5) Go, чтобы перейти к шагу 1 для следующего предупреждения в [оповещениях]

В синхронном коде псевдо это будет : 

alerts [array]

for i in alerts
  click alerts[i].load
  check if data ready; ready when save button appears
  click select_all
  click save

Вещи, которые я пробовал:

A) Для l oop, но он слишком быстро пробегал через l oop, не ожидая мутированных элементов. 

var alerts = $('.alerts'); 
var imax = alerts.length; 

for (var i=0; i<imax; i++) {  
  alerts[i].click(); 

  var done = false;
  while (!done) {
    var el = $('#save');
    if (el.length) {
      $('.ui-select-all').click();
      el.click();
      done = true;
    } 
    else {
      setTimeout('', 500); // try again in 500 milliseconds
    }
  }
}

B) Пока l oop

var alerts = $('.alerts'); 
var imax = alerts.length; 
var i = 0;
var done = false;
while (i < imax ) {
    if (!done) { 
        alerts[i].click();
        done = true;
}
 var el = $('#save');
  if (el.length) {
    done = false;
    i = i+1;
    $('.ui-select-all').click();
    $('#save'); 
  }
}

Примечание: jquery используется для краткости. Для Vanilla JS замените document.getElementById() и document.getElementsByClassName() при необходимости

Это блокирует браузер с момента его вращения

Попробовал setTimeout, но это был адский джанк-вызов.

Пауза 1-2 с на шаге №2 будет достаточной, после завершения №4, начните снова с № 1.

Однако, это идет вразрез с функциональностью JS asyn c, поэтому я не ясно видя, как это сделать.

Ответы [ 2 ]

2 голосов
/ 29 января 2020

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

Ниже приведен пример использования Promises для создания метода wait.

  1. Нажмите кнопку «Предупреждения»
  2. Появится кнопка «Сохранить»
  3. 5 секунд срабатывает время ожидания
  4. Через 5 секунд вы увидите console.log сообщение 

const btn = document.getElementById('alerts');
btn.addEventListener( 'click', async () => {
  createSaveElement();
  console.log('waiting 5 seconds');
  await wait(5);
  console.log('finished waiting 5 seconds');

});

function createSaveElement() {
  const container = document.getElementById('container');
  const saveBtn = document.createElement('button');
  saveBtn.innerText = 'Save';
  container.append(saveBtn);
}

async function wait(seconds) {
  return new Promise( (resolve, reject) => {
    setTimeout( () => {
      resolve();
    }, seconds * 1000);
  });
}
<button id="alerts">Alerts</button>
<div id="container"></div>
0 голосов
/ 29 января 2020

Сделано с помощью макроса и Firefox консоли.

Решение, которое работает:

1) Что такое JavaScript версия sleep ()? 

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function backup() {
  var alerts = $('.alerts'); 
  var imax = alerts.length; 

  for (let i = 0; i < imax; i++) {
      alerts[i].click();
      await sleep(2000);

      $('.ui-select-all').click();
      await sleep(200);

      $('#save');
      await sleep(500);
  }
}

backup();

Решение, которое может работать:

2) javascript синхронное выполнение

JavaScript приостановка выполнения функции ждать ввода пользователя

Рекурсивная версия обратного вызова

Если есть краткий подход, основанный на событиях, я бы предпочел и принял это как ответ

...