How can I wait for a function to finish in a second script element?

Question

Can anyone please help me with this code to make console.log(var1) work when var1 is being set within a function that takes a little time. Here is the basic problem to replicate:

<script>
  var var1;

  async function loadSuccess() {
    await setTimeout(() => {
      console.log("waiting 5000 ms");
    }, 5000);
    var1 = "success";
  }
  loadSuccess();
</script>

<script>
  console.log(var1);
</script>

Since loadSuccess() takes an extra 5000ms to complete, console.log(var1) prints undefined because it runs before loadSuccess() is finished.

Can anyone help fix the code in this example to make it console.log(var1) return "success" in the 2nd script?

score 0 · Answer 1 · answered Sep 01 '21 at 14:24

This might help:

var var1;

function loadSuccess() {
    return new Promise((resolve, reject) => {
        console.log("waiting 5000 ms");
        setTimeout(() => {
            var1 = "success";
            resolve(var1);
        }, 5000);
    });
}
loadSuccess().then((var1) => document.write(var1));

Also, setTimeout is not an asynchronous function so you do not need async/await with it.

How can I wait for a function to finish in a second script element?

1 Answers1