How to run js files in order

Question

I am doing some web automation and when I run the code in the chrome console it runs through the steps so quickly the page cannot get into position before the next event. I have tried to add a delay but it did not work to slow things down. Now I noticed that if I run the code broken in to step functions, step1(),step2(), step3(), etc. It works, but not when all the steps are run straight through in the same js file because we get the same timing issue again with the code running faster than the webpage can respond. How can I run multiple js files, Step1() file, Step2() file, Step3() file, etc, to solve this timing issue?

Wait code

//Wait function
function wait(ms){
    //alert('Waiting');
    ms += new Date().getTime();
    while (new Date() < ms){};
};

Current Code layout

//running section

//Step 1
var fruits = step1();

//Wait 2 Seconds
wait(2000); 

//Step 2
step2(fruits);

//Wait 2 Seconds
wait(2000); 

//Step 3
step3();

//Wait 2 Seconds
wait(2000); 

//Step 4
step4();

Goal:

Run: Step1File.js

Run: Step2File.js

Run: Step3File.js

Run: Step4File.js

Answer 1

Use async await. Declare each function to be an async function, then put await in front of each function call in your code layout.

// step 1

async function step1() {
  // do some stuff
}

Repeat for all functions

// running section

async function runTheStuff() {

  await step1()
  await step2()
  await step3()

}

runTheStuff()

This is severely simplified but should get you started. aync/await - learn it, love it.