Question

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

场景：

数据在网页上作为一系列元素提供。例如：

[Data A]

[Data B]

[Data ...]

单击一个Data元素。

短暂延迟后，元素将填充到数据元素下方，并出现[保存]按钮。例如：

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

选择所有item

单击[保存]下载。

重复步骤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/

Attach event to dynamic elements in javascript

JavaScript暂停/等待;同步执行

2 个答案: