async/await jquery animate

Asked Nov 20 '18 at 13:20

Active Nov 20 '18 at 13:27

Viewed 1,022 times

I want to chain Jquery animations and for the sake of readability I'd like to keep my code "vertical" not "horizontal".

Here's what I've done but does not work:

async function close(id){
    return $(id).slideUp().promise();
}

async function shrink(id){
    return $(id).animate({width: '50%'}).promise();
}

[...]

function update(){
    await close("#myDiv");
    await shrink("#myDiv");
    doSomething();
}

But I get an error: Syntax Error: await is only valid in async functions [...]

I know I can chain Jquery animations (foo().bar()) or use these functions' callbacks but my question really is about async/await

edited Nov 20 '18 at 13:27

asked Nov 20 '18 at 13:20

ted

11,582
6
55
96

4

`((async () => { /* your await code */ })())` – TryingToImprove Nov 20 '18 at 13:23
2

...and you don't need async before `shrink` or `close` – MrAleister Nov 20 '18 at 13:24
Yeah ok got confused ; the async goes where the promise are awaited not where they are created – ted Nov 20 '18 at 13:25
No - 2 sec @ted I write a answer – TryingToImprove Nov 20 '18 at 13:25
The reason you get a error is because a JS-file is not "async" at the top-level. This answer here provides a great description: https://stackoverflow.com/a/46515787/1514875 – TryingToImprove Nov 20 '18 at 13:26
also let me update something – ted Nov 20 '18 at 13:26
Possible duplicate of [How can I use async/await at the top level?](https://stackoverflow.com/questions/46515764/how-can-i-use-async-await-at-the-top-level) – TryingToImprove Nov 20 '18 at 13:26

async/await jquery animate

0 Answers0