 Hello, this is Christian. Welcome to another video. In this video, let's talk about two very important APIs, or web APIs rather, called setTimeout and setEnterval. And they're responsible for something called asynchronous operations. So we know that JavaScript is a single-threaded language. Again, think of a train that runs on a single track that is responsible for delivering all these people, or we call it messages, along this track. So if there's anything that's blocking this track, everything comes to a halt. And you don't want that to happen on your web pages website. So I explained in the previous video, if you haven't seen it, please go back and watch it about this event loop that is part of the main thread inside the JS runtime on the browser. So it's responsible for interacting with the client and processing information, and responding to the client based on the information it receives. And along the way, if it receives any event that is supposed to be put back to a message queue like this year, this information will be delayed at a later time, so that they'll get processed separately. And at the end, of course, they'll come back to the main thread and return that information back to the client or the user. So that is a very important concept to understand asynchronous operations. And these two functions called set timeout and set interval are usually used to mimic this multi-threaded paradigm. So here again is the piece of code that we're going to write, and we'll see that in live code to see the order of execution of this code and how they are printed to the screen. So you can see the order here is completely different from the sequence of your code written over here. So here again, it's just another diagram I showed you earlier that when you write your code based on the very first tick, anything that is on the first tick that is not being used to call asynchronously like the set timeout, then they will get processed immediately at this first tick. And then any code that is written inside or used inside this set timeout will be processed at least one tick later or beyond depending on the time you set to those functions. So let's go take a look at how this is done in the code. All right, so I'm going to use this PHP storm to illustrate this example. Again, you can use any IDE of your choice if you want. I've used Visual Studio Code in the past. Of course, you can use anything you want here. So I use this IDE because you'll see that later when I run the code, you see the color and the console is very beautiful. So I like that very much. All right, so let's go and create a new directory first. Let me call this Uniform and I'm going to go here and create a mainly we're just going to do a script. So I'm not too concerned about any web pages here. We just run everything in the terminal so you'll see in the console. So I just basically need a script and what should we call this? Let me be wetapis.js. All right. Okay, so again, js is a single-threaded language that means everything runs sequentially. So for example, if I have a variable called n is 10 and if you echo that out, of course, I'm going to log it out and you see that right away in that order. And if I have another variable called m is 20. And if I log that out, oops, m, then you see that 20 comes after that. So in that order, everything runs sequentially and all of these runs at an instance when you run the code. Because I'm not using the setTimeout or setInterval functions, everything here runs on the single tick of that very instance of that single tick at t0. Okay, so let's go to the terminal and run this on your web2. We'll go to unit4 and I'll run using this node. All right, so you just type in node and the name of the file called webapis.js and you'll see that the result here is exactly what expected. Okay, so if you don't have no, just make sure you install nojs first. I'm running here through the no interface environment. But you see that the 10 is printed here at line two and then we assign m to 20. We print that out in that order. It's sequentially. If I were to move this line above, for example, if I move that above here and I try to execute m first before it's being declared, you see that it's not it's not going to work because m at this point is undefined. It's not until line four. So sequential order is important at this instance. So if I go back down here in my terminal and just press up arrow to run again, you see that, you know, this part's fine but when I print m, I say, hmm, where is m? That means above here, right, above this code and it's not there yet or that instance that's that very first cycle through the event cycle and it was not declared and was not defined in memory. So therefore you get that problem. Okay, so that is a very common thing. However, if I do something like this, if I put into a function, say f of x and I put this inside the function, then I mean it wouldn't matter, right? Put that in there and if I call instead of m, I call it f of x and okay and then let's let's return this m here, return m. Then of course functions are always, it's going to be hoisted up out to the in this case to global space. So this will exist before you even invoke it, right? So function takes precedence in this case. So it doesn't matter where you put your functions, it will always work in this order. Not true for Python, right? But in this case, yeah, it's no problem in JavaScript. So you can see that my function can be declared any before or after it doesn't matter. It depends, it's important where I invoke this. So I invoke it in line three. So if I go back in my code and I run it, you see that it run just like I expected in that order. And if I put that function called first, the way I move so quickly, you see here is I press the shift alt or the alt shift how you want to call it. And you just press on the line. If you want to move multiple lines, just select the both of those lines and you move it and they'll move up and down like that, okay? And press the up and down arrow key. And so I was easily moving those, was able to move those lines quickly. So now I'm going to invoke effects first and I get a 20 and then the 10 becomes the second output here. So I reversed the order pretty much, basically that's what I did. Okay, so everything happens here sequentially on the main thread, okay? So now what happens when I do the following, right? So let's say that I'll keep it as is. Yeah, so let's say I'm going to use this setTimeOut function. This function here takes two parameters as you can see here. The first one is a function, it's a callback function. A function that returns something back, it's always called a callback function. You can use a separate function like f of x here, like you have here. So if I want to use that, I just put that function here, okay? So don't invoke the function. If you invoke it, it won't work. It would work but it will work in a very unexpected result. And usually you don't do that, okay? So you just leave it as the name of the function and what this does is that it will wait until a certain time has expired. So by default, it will always be set to zero. Okay, so this zero here is usually is the same as a one. So if you put one and zero, I think they're pretty much kind of same here. Even if you put like a negative number, it will still be resorted to zero, I think. Okay, so the minimum is zero. It's measured in milliseconds. What that does is, what this function does is that when you see this function, it will at least you know push this function into a separate tick. Okay, at least to the next tick, which is tick number two, right? So the first tick that comes through, all this will run until you find one of these functions. If it does, it will move that to the next tick, the next round. And by that time, then all of this would have been run. And so therefore it says this is always one tick behind. Okay, you might hear that term. And so I'm delaying this function call now inside this set timeout. And because I call this one here explicitly here, not inside the set timeout, of course, this is going to get called first. So I'm going to get the same result 20 and then this is delayed. And then so I'm going to print 10 next, right? So 10. And then finally, it will call all these functions. If I have a lot of them, those will get called sequentially. And then we'll look at the time as well. That's also important. Okay, so in this case, my expected result would be I get a 20 because I call the f of x. And then I get a 10. And then finally, this one, I'm going to get 20 again. So 20, 10, 20. Okay, so let's see. So I get, well, oops, I did not invoke it. I'll return it, but I did not print anything. So let's let's do something here pretty quick. Let's print something here. I want to print it before I return. Okay, so we can see the result. My bad. So let's say log m console log. So I'm going to log m in here. And it's going to mess up my, you know, my program here because if I do that, it's going to do it twice. Okay, because I'm logging it twice. So I'm going to turn off this log and just invoke it. Okay. I want to print it twice. Okay, so let's for again. So I should get the same result as expected. I'm going to get 20, 20, then 10, and then 20 again. Okay, so as you can see here, the result, you get 20, 10, 20. Okay, so because this one here doesn't matter what you call it in this case. If I move it above to the very top, again, alt shift and up arrow, I move it to the very top. Okay, even though, you know, it's up here, it doesn't really matter because at the first tick, it's going to move that to the second tick anyway to the next round. Okay, so if I save this, again, I get the same result, 20, 10, 20. All right. Okay, so that works just like that. And because the first tick already passed through, that means the variable n has been recreated and memory is stays in RAM. So if I were to go into the function x here and instead of m, I would put m times n. Okay, and we'll return here the same result, m times n. I'm not using this for now. Well, I do, I, you know, log, put it here, but this is not really used at this point. Okay, so you'll see that when I print this out, and let's make it a little bit interesting. I'm going to move the f of x here above it. Okay, before I declare the n. And as you can see, if you follow this through, you'll see there should be an error. All right, because when I invoke the function at this point, all right, it goes in here and m is declared. And I log it here, m times n, but n was not declared until after the function call. So I should have a problem here at this line when I invoke line two. Okay, and then after that, everything here is done at the first tick. Now, at the second tick, because I delay this function call at using a setTimeOut function, at the second tick I come around, then I invoke the same f of x function. By that time, n has already been declared in memory. So therefore, I should be able to print 10 times 20. I should get 200 here. All right, so let's save and see what happens down here at the console. Okay, so you see that first, when I invoke the f of x, right, that's the first thing. Watch this one first, but it's a delay that. So we will look at that for the next tick. And then it moves f of x, f of x called, and then it tries to multiply m by n. At this point, n is undefined. Because n is undefined, and you try to multiply number by undefined, what you get is called a not a number. That's what you see here. And a n stands for not a number. Okay, it didn't crash your program in this case. Just throw you a weird error, a number result. And then after that, we declare n to be 20, I mean 10. We log that out. So you see 10 here. And then finally, there are no more code to run. So the second tick, the second cycle is, you know, kicked into the cycle. And then we call this function, we look at the timer, oh, it's zero. That means call this function immediately. Had this number be a different number, like a thousand or a different number, that's going to wait until that time is reached or expired. In this case, zero means right away after the second tick. So by that time, we invoke the function of x, and then we call this function again. So at this point, n has already been declared. So therefore, we're able to multiply 10 by 20, and we get 200. Okay, so that is how this set timeout function works. It's the same thing for the set interval. Except for the set interval, it constantly running at a continuous cycle based on the millisecond you set over here, right? So if I were to pull this, let's just say, as you notice, you run it, it's really quick. If I pull this into, let's just say, you know, three seconds, that's 3000 milliseconds. That means by the time when I start from t zero to after three seconds, then after three seconds expired, it's going to call this, you'll see that. So when we run in the command terminal, you'll see a slight delay. Okay, so I'm going to count as best I can for three seconds. We go, we go one, two, three, and then there it is, right? So it delays for three seconds, and this is important to understand. All right, so this time here, it started from the time that you actually run the code, run the script. Okay, and so that's how this works. Now let's say I have another function in here, I'll call it f of g, I mean, g of x. Okay, inside g of x, I'll just log this to the console also. I just call it gx, we know what that is. And after I log that out, I will have another set timeout function. Okay, this function is going to call another function called gx, hx. And this one will call after, we'll put another 3000 milliseconds here. So again, three seconds. So that means because this is nested inside the g of x, it depends how you call this. If I call it right away, then yeah, right away, like f of x, if I call that, it's going to print that right away. And then it's going to wait for three seconds for this to run. And then because they're at the same time, in this case, usually this will run first, and then that because the order is important, again, depends what you call the g of x, right. So after I call f of x, say that I'm going to call g of x down here. Okay, so g of x will run, it runs, and because this is not inside the set timeout, so it will, you know, print that to the screen, you see that g of x comes right away. And then now we put this back into another tick. So I have to create this h of x here. So let's go down here, create another function called h of x. And then here just put log hx. Okay, so what is the order here now? I'm going to put some some a colon here, just to make my code consistent. Okay, let me turn this off. You can kind of see down here. All right. So we, if you trace this code, during the first tick, it calls this timeout, push that to the second tick or later, in this case, three seconds later. And then we call the f of x. So the first thing we should do we should see is the m times n, again, this would be an a n, right, not a number. And then it calls the g of x, the g of x is called, we're going to see this right away, you see the g of x. I'll put that no here for now. Okay, so the first is you get a net n a n. And then we call the g of x, and this is going to be called a number two is gx. And then it calls this function here again ho pull this again at the next track at 3000. So from the t zero, this is still the same time as this. Okay, they're being raised at the same time. And because this is being called first, I'm expecting this to run first before this. So we'll see. Okay, so after that, then this is going to run. This is not the next thing it runs here is not on a timeout. So we invoke that. And then this is on the main thread. So this is number three, we're going to get a 10. Right, so after 10, then no more code to run except its functions. So now it goes back to the second cycle, second cycle kicks in, this works called first. So we're going to go into f of x, and we check the timer is three seconds after the second is reached, they both at the same time. So they're racing against each other, right, because I this is one first, we're going to call the f of x. And so the second time around this time, at the number three, number four, we're going to get 200. And then finally, because this is called after the timeout and at the same time, and you can't run, you know, display two at once. Again, due to a single thread, then we're going to see this output down here, when this runs, and then put here at the number five, you get HX. Okay, so let's see if this is correct. All right, so let's go to our terminal again. And I closed it. So let's go to unit four. And then I'm a clear my console and run node web API is that JS. And let me just kind of make some space down here. And here we go. So what do we see here, right? There was a delay, you saw there's a delay for a couple seconds. So we see that the first one was an an, as you can see, and then we expect the second to be gx. And that's what we got. And then the third is expected at 10. So we got a 10. And then we expect the next one to be 400 because again, they are the same seconds, this is based on the on the constant time, since they're the same time that the sequence of of this functions being called takes precedence. So f of x was called first. So we get that here, the number four, which is this 200. And then finally, we call the g of the h of x down here. And then we get the h of x. Okay. And just to prove that it's true, if I put this two, two seconds, instead of three seconds, okay. So if I do that way, then the last two here is just going to be reversed. So you're going to see the h of x first, before the 200, because, you know, the two seconds comes before the three seconds, based on the global or constant time. And let's see that it's true. So I'm going to go and just run that code again. And they go a couple of seconds. And there you see, so you see that the everything here's above is the same, except the last two, because the three seconds is, you know, happens after the two second time, right? So you see that h of x was printed here before the 200. Okay. So basically, that's how these two functions work, set timeout and set interval. They are being delayed for at least one tick behind the main thread that makes this the very first tick of your code. And sometimes this can be very tricky, but also very useful when you run your application on the browser, when that single tick can play a significant difference in your code. Okay. So I'm just to illustrate the last piece here is the set timeout. I want to show you here how much time has passed since we run the code. So you can do something like the following. Say we have a, I'm going to borrow here t start is we start from zero. This is time start zero. And I'll print that right away, right? So if you log at t star, you're going to get zero right away. Put here start. So t start right away. And then I'm going to set a time here. So set set interval. This is the syntax here is kind of similar. So you put another function and then you load based on that second. So I'll just use anonymous function here. So just the arrow function, oops, arrow function. And then the second parameter, if you put it back so you can see a little bit nicer is the time. So by default, zero, zero means every, every zero milliseconds. That's very, very fast. So I'm going to pause it for every second. So that means after every 1000 milliseconds, run this code inside here. So what I'm going to do is going to, I'm going to print that out to the console. Okay, it's going to log that out. Let's say curl time. So you can see what that with that is. Well, I mean time and say, I should say lapse time, but at least you know what the time is and measure in seconds. So from zero, it's going to come every second. It's what I'm trying to show here. So how do we do that? Well, you know what I should do? Right above here, I need to put a, let me modify this a little bit. This will be zero, no matter what. I'll start at zero. By time star, I'm going to do a new date. Okay, just make it simple. When I run the code, let's run the date. And here, this is the main time, right, the constant time. So here, I'm just going to do a, the new date again. So get the current time at this time, when this thing runs for the first second, and then even I mean exactly one second, okay, you're not going to get exactly second. There's some some delta values minus from the start time, which is t start. So that will be fixed initially, right? And then you get a difference in time. So you run every second. So every second, this will be printed to the console. Okay. And then you see that after three seconds, you will see the, the, this result. And then after one, two seconds, you see the result. So to make it a little bit more exciting, let's put here, after five seconds, you'll see that after three seconds, I'm going to see the h of x. Oops. Okay, so here we go. And let's see what happens down here on the console. And let's run the code. There we go, zero. Oh, my number is incorrect. I should have divided by a zero. Okay, so let's pause here, control. Let's do one more time. This is actually measured in milliseconds. So it should be 1.001 a second. Let's fix that. That means I need to wrap this with a minus a thousand. Okay. So I get in seconds, but I did not use the floor. So you're going to get 1.008 seconds, but which is fine. Okay. And so let's throw one time. Here we go, time zero, and then one, two, three, four, five, six, and so on. Okay, let's stop that. So you can see that at time zero, we printed the nan and then the gx and then the 10. Okay. And then it, it's done there. So it goes to the set timeout and we have to wait that for five seconds. Right. But that's going to five seconds. So after five seconds, you will see the 200 be printed. So you can see that after four seconds at the very fifth second here, that it's being printed. And this is printed after three seconds. So you can see after the three seconds here, right at around the same time, we print that out. Okay. So that is to prove that, yeah, it's, it's raised, it's raising against, on that constant time when we initially started. Okay. And when you have these functions being called here, whether they are nested or not, they are, the time here is, I believe it's calculated based on the constant time. So whichever time occurs first will get executed. So when you run a nested function inside f of x like I have here, I mean like g of x, like I have here, then this will be added to the initial time if you run that inside another set timeout. Okay. So what I meant was if I were to call this inside a set timeout, then it's going to be different, right. So it's going to be whatever that time is. If it's zero, then it would be zero plus this and this is still going to run first. So the total time here is important when you run this kind of code. But the order here is not that important when you have, if you run the same tick and they have different time over here. So this one takes precedence. I hope this is not too confusing, but this is a very important concept, how to understand, about understanding how asynchronous works in JavaScript. Okay. So I hope this kind of give you an idea of, you know, how this works. And in the next video, we're going to do a Ajax application to show you how you can use that set timeout by something similar to fetch data from a different site. And that's important because when you do that kind of operations and when you are reaching out to a different site or server site to grab data, you don't want your script to come to a halt. If it does, then, you know, you're going to lose customers and lose client because your site will come to a halt. All right. So I will stop here. And if there's anything here that is confusing, or if you don't understand something here in the code, or if you just have any, you know, questions about it, please let me know and I'll be more happy to answer. So thank you for watching and see you next time.