Sleep with Async / Await

In this drive by code session, I replay some of WaiKit’s code examples to explain the async / await feature in JavaScript and use it to implement a sleep function similarly to how a sleep function works in a traditional programming language like Python and C.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : hello there and welcome to a drive-by
00:02 : code session this video is going to be a
00:05 : short introduction to the async/await
00:08 : feature of JavaScript my friend white
00:14 : cat he did some code examples for
00:17 : async/await and I'll be replaying his
00:19 : code examples and used that as a
00:22 : demonstration so the async awake feature
00:26 : has been in the hikmah script standard
00:30 : since 2017 and it also exists in
00:36 : typescript which is what the code
00:39 : examples will be written in however if
00:42 : you are not familiar with typescript but
00:44 : are familiar with java javascript
00:46 : usually have no problem following along
00:49 : so let's get into it
00:51 : so this is the first code example it is
00:56 : meant to simulate a lift-off countdown
01:01 : however if you ran this code all of
01:05 : these printouts would would get printed
01:07 : out all together immediately and that's
01:11 : not really what's desired what we really
01:13 : want is to have a brief pause maybe like
01:16 : a one-second pause in between each of
01:19 : the print statements or each of the
01:22 : console dot log statements and in a more
01:26 : traditional language like Python or C
01:31 : what you would do is you put a sleep
01:34 : statement in between each print
01:36 : statement and that will cause the
01:38 : program to just pause for a specified
01:42 : amount of time in this case that's one
01:44 : second
01:45 : so let's see how that goes so here is my
01:49 : cat trying to write an example in Python
01:51 : he's struggling with importing this
01:55 : sleep function though so he tries again
01:57 : do you import sleep from time from time
02:01 : import sleep and okay so that one works
02:05 : so so in Python this is how you you
02:10 : pause by just calling the sleep function
02:13 : what about in JavaScript well in
02:15 : JavaScript you use set timeout and so
02:19 : this is what you do so this is how you
02:26 : would do the same thing as this place on
02:29 : example s in JavaScript let's run this
02:36 : five four three two one liftoff so so
02:42 : this works but why is this so
02:44 : complicated why does it have to be so
02:47 : complicated I had some people ask me in
02:50 : the past why can't you just do this why
02:55 : doesn't this work well if you ran this
02:59 : code you again have all of these print
03:04 : statements come out all at the same time
03:07 : and without any pauses so let's see a
03:10 : simpler example with set timeout so so
03:15 : let me ask you a question for you the
03:18 : viewer
03:18 : so given this code example what should
03:23 : be the correct order of these print
03:27 : statements and the order of which word
03:30 : where these texts come out I'll give you
03:33 : a moment to to to read this code and
03:37 : come up with your answer you can even
03:40 : pause the video to do it if you want to
03:44 : okay so if you decided to do it
03:48 : congratulations I hope you got the
03:50 : correct answer but if you just wanted to
03:53 : enjoy the show
03:55 : if you said hello how are you doing and
03:59 : then goodbye well that's actually not
04:03 : how it works the correct order is hello
04:06 : goodbye and then how are you doing so so
04:12 : let me give you a brief explanation of
04:14 : why that is so this is a time line and
04:20 : I'm gonna circle a DES lines
04:26 : of this program I'm not gonna do number
04:32 : four and just do number five okay so
04:36 : let's put these execution of these lines
04:39 : on this timeline here so one will happen
04:43 : first and then two three will not happen
04:49 : but what two will do is start this timer
04:55 : which will only I guess alarm 1000
05:03 : milliseconds in the future so this is
05:06 : future and this is 1000 1000
05:10 : milliseconds at this point in time is
05:13 : when line number three will execute
05:17 : however JavaScript doesn't wait for this
05:20 : timer to go off before it keeps going
05:22 : because you're too busy for that so and
05:29 : nine number four is not a full statement
05:31 : so I'm not gonna put line number four on
05:35 : the time line but line number five will
05:37 : actually happen here that's not the
05:40 : correct shade of green okay so line
05:43 : number five will actually happen here
05:46 : because javascript is not gonna wait for
05:49 : this timer to go off before it keeps
05:53 : going on to the next statement because
05:55 : javascript is a busy busy person that's
06:01 : good and well and hopefully that
06:03 : explains why this doesn't work however
06:07 : that doesn't really solve the problem of
06:10 : the code getting really really complex
06:14 : so there's actually a website that
06:17 : demonstrate this and talks about this
06:20 : it's callback hell calm it shows up this
06:24 : code sort of a moderately complex piece
06:28 : of code that relies a lot on this
06:31 : callback pattern the code is going to
06:34 : get em keep nesting to the right more
06:37 : and more
06:37 : and that just gets harder and harder to
06:40 : work with and read wouldn't it be nice
06:43 : if in JavaScript you can write the code
06:46 : similarly to how you write the code in
06:48 : Python and that's actually one of the
06:52 : things that the async away feature
06:54 : allows you to do so let's see that so
06:59 : let's see the async away feature at work
07:02 : so in order to use async away first you
07:06 : need to use an async function and an eye
07:09 : sync function is mostly like a regular
07:11 : function except that you slap the async
07:15 : keyword in front of it and then voila
07:18 : you have an async function and within
07:20 : the async function you can do any of the
07:23 : normal things that a normal function can
07:26 : do you can write JavaScript inside any
07:28 : sync function just as you can do with a
07:31 : normal function now that we have defined
07:36 : the async function we also have to call
07:39 : it and the way you call an async
07:41 : function there's no difference in in
07:45 : calling it versus a normal function so
07:48 : we have the same set timeout example
07:51 : just as it before now we can use the
07:54 : power of async await to tell JavaScript
07:57 : to wait for this asynchronous operation
08:01 : before going on to the next step how do
08:04 : you do that
08:05 : well what you do is create wrap this
08:08 : asynchronous operation within a promise
08:11 : then await it so let's see how that's
08:14 : done so this is a promise and we're
08:17 : gonna await it
08:20 : actually there's one more thing which is
08:23 : this except line okay so so first you
08:27 : create a promise object which in a way
08:32 : wraps the asynchronous operation that
08:35 : you couldn't perform and this promise
08:39 : object allows the async async function
08:44 : to know as long as you're awaiting it
08:46 : when
08:48 : finishes and when it finishes then the
08:52 : away will resolve and then allow
08:56 : JavaScript to go on to the next line so
08:59 : and the way by which you tell a way that
09:03 : you're done is by calling this accept
09:06 : function which is a standard parameter
09:09 : in this way of creating a promise
09:13 : natively so in here you can basically do
09:16 : anything that you want you can write any
09:19 : code that you want and at some point in
09:23 : time if you call the accept function
09:25 : that's the point where when you call
09:29 : this accept function that's the point
09:30 : when control will be passed back to here
09:36 : and thereby going on to the next line so
09:39 : let's see this code in in action yeah so
09:48 : hello how you doing and then goodbye now
09:51 : we have this zero this these printouts
09:57 : are coming in serially in the in the
10:01 : correct order now we can actually move
10:05 : this console dialogue out of this
10:08 : promise now and generalize this idea so
10:13 : now what this promise represents is a
10:17 : promise to resolve after a certain
10:21 : amount of time
10:22 : why don't we extract that into a
10:24 : function what should we call it perhaps
10:27 : sleep and let's say sleep will accept a
10:32 : a parameter which is in a number of
10:37 : microseconds milliseconds micro second
10:41 : movie seconds and we will put that
10:43 : amount into the set timeout so that's
10:47 : exactly how much time set timeout will
10:50 : wait and therefore how much time this
10:51 : sleep function will wait and now we can
10:55 : replace this code with this which just
10:59 : looks like a wait sleep for that
11:02 : and now with the power of the sleep
11:04 : function we can write the original
11:06 : countdown example in much the same way
11:11 : that it is written in Python and let's
11:16 : see this in action now 4 3 2 1 liftoff
11:24 : and that's really cool because now we
11:28 : can like have to have your cake and eat
11:32 : a - we don't have to sacrifice
11:35 : JavaScript way of doing asynchronous
11:38 : operations and still get this nice
11:41 : straightforward way of writing code that
11:45 : has to pause and and have asynchronous
11:48 : corporations within it that's the end of
11:51 : this drive by code session way kid and I
11:54 : are planning to collaborate and and
11:56 : produce more examples on async/await
12:00 : thank you for watching