Javascript暂停/等待；同步执行

Question

目标：从第三方站点自动备份数据。

场景：

The data is available on a web page as a series of elements. ex:

[Data A]

[Data B]

[Data ...]

Click on a Data element.

After a short delay, elements will be populated under the data element and a [Save] button will appear. ex:

+ [Data A]
   [ ] item 1
   [ ] item 2
   ...
   [ ] item N
   
   [Save]

Select all items

Click [Save] to download.

重复步骤 1-4 以保存每个 Data 元素以进行完整备份。

在同步伪代码中，这将是：

alerts [array]

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

如何在 Javascript 中完成？

Answer 1

您的步骤流程和您希望输出的内容有点不清楚。但是，我认为你最终追求的是如何监听一个事件，等待一段时间，然后再做另一个事件。

下面是使用 Promises 创建 wait 方法的示例。

单击警报按钮
出现保存按钮
触发 5 秒等待时间
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>

Answer 2

使用宏和 Firefox 控制台完成它。

有效的解决方案：

What is the JavaScript version of 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();

可能有效的解决方案：

javascript synchronous execution

JavaScript pausing execution of function to wait for user input

递归回调版本

如果有一个简洁的基于事件的方法，我更愿意接受它作为答案

更新：最佳解决方案：事件委托允许事件侦听器附加到动态创建的元素，即使该元素尚不存在。子元素创建后事件监听器可以调用匿名函数

https://davidwalsh.name/event-delegate

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

https://learn.jquery.com/events/event-delegation/

Javascript暂停/等待；同步执行

Javascript pause / wait ; synchronous execution

javascript

synchronous