Javascript pause / wait ; synchronous execution

Question

Goal: Automate data backup from a third party site.

Scenario:

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.

Repeat steps 1-4 to save each Data element for a complete backup.

In synchronous psuedo code this would be:

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

How can this be done in Javascript?

Are you writing code to scrape or otherwise interact with a 3rd party page, or do you control this page? — David
– David, Commented Jan 29, 2020 at 0:53
@MisterJojo your comment directly contradicts the docs api.jquery.com/click w3schools.com/jsref/met_html_click.asp ; perhaps a thorough reading of the docs is in order unless you desire to confuse others and hinder their learning — encore2097
– encore2097, Commented Jan 29, 2020 at 18:56

mwilson · Accepted Answer · 2020-01-29 00:55:24Z

It's a little unclear on the flow of your steps and what you are wanting the output to be. However, I think what you're ultimately after is how to listen to an event, wait some time, then do another event.

Below is an example of using Promises to create a wait method.

Click Alerts button
Save button appears
5 second wait time is triggered
After 5 seconds, you will see a console.log message

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>

I'm automating the tedious task of backing up my information from a site: click the alert -> wait to load data/element -> select all events for that instance -> click save (to download the file)
That makes a little more sense. In that case, put all that logic within the Promise. You can you while loop logic there, but I would suggest you look into DOM Mutation Events or some other method to tell you when the page has loaded the data you're after. At the end of all that, resolve your Promise. You can pass whatever data you want into the resolve(...) function. It will be returned to whatever is awaiting it.
I kinda see how that relates to the code above, but unsure how to hook in the mutation listener or which mutation listener to use. It would be helpful if you provide an example or link the relevant docs.

encore2097 · Accepted Answer · 2020-09-13 18:43:43Z

Got it done with a macro and Firefox console.

Solution that works:

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

Solution that may work:

javascript synchronous execution

JavaScript pausing execution of function to wait for user input

A recursive, callback version

If there's a succinct event based approach I'd prefer and accept that as the answer

Update: optimal solution: Event delegation allows an event listener to be attached to a dynamically created element, even if that element does not yet exist. The event listener can call an anonymous function after the sub element is created.

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

Collectives™ on Stack Overflow

Javascript pause / wait ; synchronous execution

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related