await sleep only valid in async function

Question

I'm having some trouble making the program wait for 2 seconds before it continuous. I found a solution using sleep and await, but I get the known syntax error. I tried some solutions here from other threads, but I think I'm doing something wrong. I don't get a syntax error anymore, but it's still not working as it should. Tbh, I really don't know what it does or should be doing..

The goal is to show a random word, speak it, wait 2s, speak it again and replace the word with blank spaces. With this code you do not see the random word, it just speaks it twice (without 2s pause) and only shows the blank spaces. When I remove the await (and the blank spaces) it works fine.

What am I doing wrong?

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

var words = ["meget", "går", "mor", "tog", "sød", "at væare"];
var wordsCorrect = 0;
var wordsWrong = 0;

function textToAudio(random) {
  let msg = random;

  let speech = new SpeechSynthesisUtterance();
  speech.lang = "da-DK";

  speech.text = msg;
  speech.volume = 1;
  speech.rate = 0.5;
  speech.pitch = 1;

  window.speechSynthesis.speak(speech);
}

function newWord(words) {
  var random = Math.floor(Math.random() * words.length);
  document.getElementById("Empty").innerHTML = words[random];
  textToAudio(words[random]);
  (async() => await sleep(2000))();
  textToAudio(words[random]);
  words.splice(random, 1);
  document.getElementById("Empty").innerHTML = "       ";
};
document.getElementById("refresh_word").addEventListener("click", () => newWord(words));

<!DOCTYPE html>
<html>

<head>
  <title>Aliyah's dictee spel</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="header">
    <h1>Hej! Velkommen til Aliyahs diktee!</h1>
  </div>
  <div id="Random_word">
    <h2 id="Empty">Click new word to start</h2>
    <button id="refresh_word">new word</button>

  </div>
  <input type="text" id="input1" />
  <input type="submit" name="ok" value="ok" />
  <script>
  </script>
</body>

</html>

apart from what barmar suggested , also change (async() => await sleep(2000))(); to await sleep(2000) — Cybershadow, May 06 '21 at 22:57
@AluanHaddad That explains why he gets the error, does it also explain how to fix his code? — Barmar, May 06 '21 at 23:00

score 2 · Accepted Answer · answered May 06 '21 at 23:18

there are some points you must have attention if you want to work with async functions. For example:

async function getUserAsync(name) 
{
  let response = await fetch(`https://api.github.com/users/${name}`);
  let data = await response.json()
  return data;
}

getUserAsync('wesleyramalho')
  .then(data => console.log(data));

In this function, I'm doing a request to get some payload of some github's user data. All the code after the request (fetch) should wait until the request finishes, so, we must pay attention in:

The function type: it should be an "async" function, as you can see, it's written in the beginning of its declaration;
Every "async" function should use an "await". As you can see, I wrote down the world "await" at the lines 3 and 4. So, all the code after the await won't executes and must wait until the asynchronous code finishes itself regardless of how long it takes to happen, to keep executing the rest of the operations.

So, in your case, if you want to make your function asynchronous, you probably must write it in a different way:

  async function newWord(words) {
      var random = Math.floor(Math.random() * words.length);
      document.getElementById("Empty").innerHTML = words[random];
      textToAudio(words[random]);
      await sleep(2000);
      textToAudio(words[random]);
      words.splice(random, 1);
      document.getElementById("Empty").innerHTML = "       ";
    };

Thanks! One of the comments had the same answer, but thanks for explaining. I understand the meaning of async better now :-) — Osman P., May 07 '21 at 06:32

await sleep only valid in async function

1 Answers1