Placeholder Image

字幕列表 影片播放

  • Hello and welcome in this video.

  • We're going to talk about the sink.

  • Await feature in Java script.

  • First off, all will go through a brief history off chasing programming in Java script.

  • We'll see how it evolves over time.

  • We'll quickly take a look at the callbacks, promises generators and finally a sink away.

  • So let's get started.

  • Okay, so I already mentioned this, but this is history facing programming, jobs stripped.

  • So it all started back with callbacks in the past, and then we were able to use promises, which was a major like shift from callbacks.

  • And then we were also able to its generators.

  • Now I didn't use generators much, pretty much like skipped over them.

  • So I went straight from promises to a single weight.

  • But generators are in between those two stages and finally, like, right now in the present time, we have access to these honestly, like amazing feature that is called a sink away.

  • So what they want to do next is that we want to present to you a piece of code, and then I want to show you the same piece of code in C callbacks, promises and a thinking the way for the generators.

  • I honestly wouldn't want to show that because I personally don't you have a lot of experience using generators side.

  • I don't want to show you something.

  • Dates.

  • Maybe I badly written.

  • So I'm going to skip over the generators.

  • So let me show you that.

  • And here it is.

  • So this is the callback exam.

  • Now.

  • I really didn't want to create, like, the most complex callback example ever.

  • But trust me that, like the seasons, the worse that you can see.

  • Um, he didn't get much, much, much more uglier than thesis right now.

  • So what we have here is a function date is supposed toe be and end point Chandler.

  • So, for example, let's say you were building some sort of a website, and the scandal over here will receive requests from the client, for example, the brows are sending requests to the server, and this response object is what you can use to actually write back something to the client.

  • For example, tow the user browsing your websites.

  • So now what we have in this example is we're talking with the database and let's say we have a table or a collection for user's, and we want to find a particular user that will be sent to us via this request.

  • So we want to call this function user that find by i d.

  • And simply best This requires the user i d property.

  • But now dysfunction is facing one.

  • We don't know how many milliseconds it is going to actually run for, so we need to do this in a sink manner because otherwise we're going to block the coat.

  • And given the Java script is single chided language that wouldn't really work.

  • So now we call this function and what we do then is we actually pass it as a second argument, a totally different function that will get called once these operation finishes.

  • So we say here like, Okay, you go on database and try to find me this particular user.

  • And when you do that, then and only then you call dysfunction that we passed over here and pretty much like everything starting at these lying over here and ending over here is the function that we passed two.

  • That's function over there.

  • Now what?

  • This allows us to do it say after these same the next line over here, we can maybe do something.

  • The consul, that log and whatever we do inside that kinds of that log, once this entire court gets executed will be printed out before we see any of this, because this season done instantaneously.

  • But anyway, you can see how it looks like and when you pass a callback function so dysfunctional here is called the callback function.

  • That's the reason why this pattern of programming is called callbacks, after all.

  • And when you provide a callback function, you should always provide error as the first argument.

  • So then we can easily check if there is an error by first doing that and the only if there is no error, then we can move on and do something else.

  • So in this example, if there were any errors, we would simply respond back to the clients pretty much for reading that error to the clients.

  • Now you see that we have these other argument called user, and what's going to happen is dysfunction over here used that find my i D.

  • In case they're no errors and in case it is able to find that particular user, it will send that user to this callback function, and it will be stored in thes variable called news.

  • So now we have access to this user in this callback function from here to here by referencing this user variable.

  • So now what we want to do is that user variable is going to hear property called tasks i d.

  • And pretty matching the same man there.

  • Let's say that we want to get access to those tasks so we again, like, query the database for those tasks given by that I.

  • D.

  • So we do pretty much the same thing.

  • And then again, we supply the callback function again with, uh, error is the first argument and not tasks as a second argument.

  • And then we again simple check.

  • And if there were any errors, we simply want to respond back to the plant with those errors.

  • And if that wasn't the case, we're going to do something with those tasks instead.

  • So what would want to do is, for example, like imagined that tasks he had a property called completed.

  • That is a bullion type, and we simply want to change that to be true.

  • So now, once we so now, once we actually modify it that role or documents in our database.

  • We don't want to save those tasks and saving the tasks.

  • He's again Ace Inc because it is not done instantaneously.

  • So we again need to provide a callback function to it.

  • And this time we don't want to seem to re to receive any return value for meeting said.

  • We just want to make sure that that operation was successful.

  • So then we simply check whether the Arab was there.

  • And if so, we again respond to the client with such are.

  • But otherwise we simply respond back to the clients with the message of task completed.

  • Okay, so hopefully like this will make sense and you're able to understand, like the flow.

  • And you're also able to understand, like, why is there a need for the school back functions?

  • And now let's take a look how all of these, like the exact same court issue handled when it comes to the promises and this is a promise, is example, and one thing you can spot straight away easily how, how much clear and cleaner this could actually is.

  • So this time, what we're doing, he's given that user that find by ideas again the same function.

  • And it is again a sink function.

  • We simply call it, and we pass what their argument we actually want.

  • But then, instead of supplying a callback function to these line over here, what we don't do is we take on the dot then function, and then there we actually supply.

  • You can think ofit like callback function.

  • What will happen once these operation is completed So it can pretty much traded like dislike user that find by idea capacities, idyllic started this process and then once it's actually completed, only then do you do whatever the code is over here.

  • So when that's done, we can then get a handle on that, use their subject, and then we can do something.

  • Now, here, we're going to start another racing function.

  • Cool tasks that find by i d.

  • So we pretty much just return that, and then what happens is we can just attach on like another, then to this piece over here.

  • And then this part over here will only get executed once this Ace Inc inside of here is actually completed.

  • And now in the same manner we can do these lines of codes over here and then task that safe is yet another facing cooperation.

  • So we want to return that as well.

  • And then we supply another function that should be executed once this is done.

  • And now we don't need any parameters here, so we just respond back.

  • The client saying Task completed.

  • Now you might be surprised how we didn't do any era Hell link so far.

  • So what's going on is using promises you can actually call dot catch at the end, which we'll catchall there's for you and then we simply want to respond back to the client with such Harris, if that was the case, So, as you can see, it's much clear because one error handling doesn't need to happen all the time.

  • We can just like you have, ah, specialised piece of code that is going to handle errors no matter where they actually happened.

  • And to, um, as you can see, we don't you have that nesting better.

  • That gets really hard to read.

  • That is called a callback hell and sometimes it is referred toe Christmas tree shaped because, as you can see, it goes kind of like these and then the opposite.

  • So it is definitely like a much neater way to write facing coding job script.

  • Now let's take a look at the same example using the sink.

  • Wait, and here it is.

  • As you can see, it's much, much, much, much more clear than what being able to see previously.

  • It almost looks like a sink and blocking coat, but fortunately it isn't so.

  • What's going on here is whenever you want to write a sink, await function, you need to write this key words.

  • They think before the function keywords.

  • And once you do that, you actually have ability to use these away.

  • Two key words inside of that function that is declared to be a racing function they think await is actually all promises under the hood.

  • So, like if you really want to get ah deep and detailed understanding off a sink await feature, it's best if you learn promises first.

  • But I'll do my best at least explain you what's going on over here.

  • So first thing you can notice is we have this try catch construct, and that is how you're able to handle errors in a sink, awaits functions So the sketch piece over here is similar to the catch beasts we have seen over at the promises Example.

  • We do all of our era handling inside of here and inside of our try block over here.

  • What we do is next we call this user that find my I d.

  • And again we passed parameters that we wanted.

  • But now we actually, uh, right this a way to key word in front of it which will actually tell this function that this operation over here is It's Inc and it's not going to happen instantaneously.

  • So these pretty much ah awaits this function to be resolved, and then each stores the result of feet in the variable that we assign and left.

  • And now this next line tasks equals await us would find by a D will only execute after the user equals of 80 residents find by a d gets resolved So you can almost, like, read it like a sink blocking quote.

  • So next we wait for the tasks and then we supply this user the tasks i d.

  • As an argument.

  • And then we get those tasks and then we can simple, like task that completely equal strolling modified the tasks and we can also save the tasks.

  • And you can see because all these three operations are you think we need to put this away to keyword in front, and then we can simply responds that send to the client back message saying that's completed now.

  • If error happened during any of those three operations, the execution flow will jump straight to the sketch block over here, and it will respond back to the client with such error.

  • So I hope that now you can appreciate the abilities that I think a great feature actually gives us as we do our daily Java script chasing programming.

  • So what I want to do next is I don't want to stop here, but instead I want to go with you through a bunch of a think await examples win, which I could show you the sequential flow barrel flow.

  • I also want to show you like all the loops and deterioration that you can do with a sink.

  • A Wait, I'm going to show you some common gorgeous that you might be unaware off at this moment.

  • And all in all, I just want to let go through it, A bunch of examples.

  • So did you feel confidence in your ability to start using this A sink away feature today?

  • Okay, so now let's do like a bunch of examples so that you can see all the ins and outs off using a sink awaiting your code.

  • So what I've done is I've made, like three different folders who were here.

  • First we have a sequential, then we can parallel and then we have lips.

  • So those are three topics that we want to go through and in each of the lease topics we have, like for the sequential, we have, like a naive approach.

  • Then I'm going to demonstrate like an issue that happens with it.

  • And then I'll also proposed a solution.

  • And that's the same with parallel and then for the Lopes.

  • I'm just going to let go over like the different types of situations that you can go with using a sink away and explain, like what you can do and what you can to do.

  • So let's get started with the Sequential project example and let's go in this name approach.

  • So we have two files that we care about.

  • We have a major address and we have a process that Jess.

  • So if open main just filed you see this?

  • We simply get a handle on those two processes that we actually have inside that process filed.

  • And the whole idea about this small project is it We have to process data a think, and that we want round them sequentially.

  • So now, like in the example that I've shown you in the slides, we have this function main that gets cold over here.

  • And then we attach these ace inky words in front of these function key words.

  • And then we do all sort of things inside of here.

  • So what we do is we await for those two processes.

  • And then what we want to do is we want to store their values in these two variables over here and then simply when all of this is done, we wantto use the consulate log to actually print out to the terminal the value states we got from those two processes and then these consulate log is simply for like, for mating purposes.

  • And we also call these consulate time and causality.

  • Time and functions which will tell us how long?

  • Uh, the function has been running for in milliseconds.

  • And if there any errors, we simply consulate.

  • Error them again to our terminal over here.

  • So now let's take a look in this process of Js file and see what's in there.

  • So over here we just eat export to functions that they're also a think ones.

  • And in them we simply coward put it process has started.

  • We again used time in time ends toe show to the terminal how long this particular function has been running for and likewise for the 2nd 1 And then we we kind of fake these operation by simply waiting 5000 milliseconds.

  • And for this wait function, I'm actually using said time out.

  • But because that time out is expecting our cold back.

  • We're actually using this promise if I function from the util package in no Jez which will actually turn the set time out in tow, a promise based functions that we can use inside of our 18 coats.

  • So remember, like the A sink is pretty much like promises with ah different interface that we can interact with so well we can't really use callback functions inside of our racing function.

  • All of that needs to be promises.

  • That's the reason behind this.

  • And I didn't tell this before, But I'm using note for this because it's much easier for me toe using gold.

  • Sort of, um, things like these did already built in.

  • But you can, of course, learn a single weight and use it for, like everything that you do inside of JavaScript.

  • Beat back and be front end your choice.

  • So hopefully like this is this is making sense like this is really simple, fake, made up example.

  • And when both those processes are finished, we simply return some bad.

  • For example, process 01 is going to return this process your one dash value, stink and process.

  • Your tour is going to return this value instead.

  • So now let's actually run this and see what's happening.

  • So I'm going to use my terminal.

  • Let me just bring it up a bit, then going nephew to death the rectory and that sub directory.

  • And then I'm going to execute notes and then main that just as the entry point.

  • So as you can see, Bro says, you're one started and it is taking some time, and then it says process, you're one ended and it took roughly 5000 milliseconds.

  • Then the process, you're too started.

  • And then the process, sir, to ended, and that one took 3000 milliseconds.

  • And then we see that process, your want, returned back to us, this value and likewise for the second process.

  • And then we can see that the total running time for this entire example is 8000 and so milliseconds.

  • And that's makes sense because when you take a look here, this one takes 1,005,000 seconds roughly, and thestreet thousands of that totally adds up.

  • So that's all good.

  • And as you can see, it seems like it's working.

  • But you might have noticed that I didn't use Try catch blocks inside of these two functions, and that is kind okay, because if these or these function returns in error, it will simply bubble up to these main function and then were able to catch it inside of here.

  • So that's that's good.

  • But we'll see, like what beds can happen in doing so in our next example.

  • And now I'll never get to our second example and show you the changes So if I open this file main the Jets were here and they closed the other one, so I don't get confused.

  • We kept the same quoting our main suggest file over here, and our proceeds of Jan's file is also the same.

  • But we did at this throw no error line in this process, your one function.

  • So there's the Brosa.

  • 01 is going to actually throw in error once runs, and we'll see how it how it effects everything over here.

  • So let me quickly navigate that directory and let's see what happens when they're on it.

  • Like that note made a Jess.

  • And as you can see, process 01 started, and then we get these air over here.

  • That protester one failed.

  • So what happened is this code started going sequentially.

  • It's came to this point over here, then the protease, your one true, an error.

  • And then the execution flow jumped straight from this line to the catch block over here.

  • And that's the reason why nothing of these executed afterwards.

  • So if you give multiple processes that you want to await sequentially, these wouldn't really work because as soon as one process verte retraining error, the rest of them wouldn't get executed.

  • Now, Sometimes this is really good, because maybe if this process failed, you just want to like accident rating, and then you can use this approach.

  • But if you really don't care if these pros easier, one through was an error or not.

  • And you simply want to get, like, as much value as we can from the other processes, then these wooden's work for you.

  • So now let's take a look at one approach it you can use to avoid having this sort of issue.

  • So I'm going to close both of these files.

  • And then l opened these 03 solution directory, and here we have the exact same Main Digest file.

  • But this time the proceeds of jazz file it's different.

  • We again throwing the wearer inside of the process.

  • Either one, and we again don't throw any errors in the process.

  • You're to function, but we deeds at the strike catch block into both of them, and what's going to happen is as soon as thes process you're one throws an error.

  • It is not going to actually bubble up to this part over here, but instead it will actually jump to this line in the same function and simply do this and we'll see how these totally like save our lives if we want to get this value, no matter what happens with the first process.

  • So now let me actually start this example.

  • I'm going to go back again and go back into this new example.

  • And then l exit you know, mean and as you can see, bruises one started and grosses.

  • One failed, but we're still doing something after that.

  • Then we're starting the process year or two.

  • And then the process, you're too actually successfully ended after 3000 milliseconds.

  • And then we see that we hear of undefined value from the process here.

  • One, since that is the pros that failed.

  • But we do have a return value from the process.

  • You're too, because that one was successfully executed.

  • And we see that the daughter running time for this small example eats 3000 milliseconds because this 1st 1 failed and then we didn't need to wait those 5000 milliseconds to pass by.

  • So with these three examples, you should feel more and more confidence in writing a think, obviously the more you learn, and the more you know about promises, it's going to benefit you a lot.

  • So even if you're interested, sink away exclusively.

  • I would suggest that you, like, take some time and go over promises in your spare time.

  • But now let's take a look at what happens when we want to execute things using the sink awaiting parallel.

  • This time, clear this console.

  • I'll close this file and then I'll navigate to our seconds the rectory that is called Parallel and again.

  • As I already told you, we have three different.

  • They're subdirectories, So let's open the first month.

  • It is called naive and let's take a look at it.

  • So this time the idea is the same again.

  • We have two processes and we want to run them.

  • But this time we want to run them in parallel and not sequentially.

  • That is what this small comment says, and how can we do that?

  • Well, first of all, let me take a look at the process, suggests file, just to show that it is the same as we had previously, and it is also stripped off.

  • Try catch blocks and we're drawing no heiress this time.

  • So in this main to jazz file, what we do, first of all, is we have these promise that all function pocket.

  • So what this promise it'll function does is it returns single promise tow us that resolves when either all of the promises in its argument gets resolved or if there are no promises over here.

  • And this promises all also rejects with the reason off the first promise that got rejected in its argument.

  • So all of that might be a bit confusing.

  • But the most important thing is this.

  • Promise.

  • A toll will call all of these for us and will return a single promise for us that will get, say, completed when all of these are completed.

  • And if any of these fails, then the promise the toll will also fail on that return promise with the reason off that failure and what we can do here is that the older returned values from thes yet store it into this data variable that he's actually honoree.

  • And then if we wanted to access the return value from the process, you're one.

  • Since it is the first element in this array, we can access that by using the notation off zero.

  • So we were referencing the zero elements of this ray and likewise for the second process return value.

  • It is a second element in disarray.

  • And because it all starts from zero, that is the first element in battery.

  • And if we actually run this example and the fair our needs, we'll see that both process this time started straight away.

  • The protest 02 is actually the 1st 1 that ended with 3000 milli seconds.

  • Then the process here one ended REITs nearly 5000 milliseconds, and we conceded we have access tow boat off those returned values.

  • And really importantly, this time we see that the total running time off this example is 5000 milliseconds.

  • And it is not 1000 milliseconds like it was earlier because, like we have those two operations and the operations here, one is the longest one.

  • So the running time is pretty much going to equal the longest operation that we're running because the other operations are going to be completed by that time.

  • So this is all great and it is working.

  • And now let's take a look.

  • It one potential issue that you might have with this approach is, well, close all of these.

  • And let's go into the second folder.

  • Okay, so the issue.

  • Okay, so this is the same like it was before.

  • But if you come to these processes, we see that it's looks awfully similar to this example over here and infected tried toe keep them in the same manner.

  • So the only changes this time we're throwing new error in the process.

  • Your one.

  • And let's see how dead effects are promised that all function now, you remember what you just said is that the promise, a toll returns a single promise, and that single promise actually fails with the reason off the first promise that fails over here.

  • So let's see what happens.

  • I'm going to start this and charities.

  • So we actually let me bring this up.

  • So we started both of the processes, and then the process 01 failed, and then the process here to end it.

  • But as you can see, we don't This'll never got executed because it jumped straight to this bloke over here and the total time running.

  • We also didn't see that because again, all of these was avoided because of that error.

  • So this is no good.

  • If you were interested in at least say this valuer here, no matter that the 1st 1 failed.

  • So the solution is going to be a pretty similar to what we did in the solution for our sequential problem.

  • That was off the same nature, pretty much so.

  • Let's quickly jump into it and see the difference.

  • Okay, so the main is the same.

  • And now let's jump into the proceeds of jazz file and see what's changed, and it is similar to what we've been able to see before.

  • So it only changes that we added to try Catch blog's into both of these functions.

  • And again, we're throwing new error inside of this process your wife.

  • So let's see how that effects things.

  • So I'm going to navigate to get directory and then I'll type No, it's mean, and as you can see, so both of them, both of them starts running.

  • But immediately the process 01 fails, and then we get a notification process.

  • You're too started.

  • But this could be slightly misleading because both of them got executed at the same time.

  • So let me make one small adjustment because now on the second locate, this could be a bit confusing.

  • Let me just simply before we train you error, Let me, actually just ah, wait, um for let's say 100 secretaries, so just want to show you with it.

  • But by reading this, you might think that this this is executed sequential because you see, process one started process toe process one failed and only then process started.

  • But if actually re around this example now we see that the boat of the proceeds actually started.

  • Then the process either one failed.

  • And then the process here to end it.

  • And now we have access to all of these over here because we candle dhe the heiress more carefully this time and we see that processor want returned.

  • Well, we don't know it failed, but we have access to these valued its process.

  • Your 202 returned and it is correct one.

  • And the total running time is 3000 milliseconds.

  • Because the 1st 1 failed and second born, he was running for exactly that amount of time.

  • So now if you ever need to run some operations in parallel date or not depending one off another.

  • You can use the promise a toll.

  • Just be careful with the errors.

  • If any off such prophecies.

  • King actually throwing error and most of time they indeed again.

  • Make sure that you're that you're handling those errors inside of them.

  • And don't simply rely on those areas bobbing up in your main because, as you can see, it will totally mess up the application flow.

  • So now we've seen sequential execution.

  • We've seen parallel execution.

  • Now we're going to take a look it Lopes and it orations and see.

  • How can you do that using a sink?

  • Wait So I'll quickly close everything and sorry, I'll quickly close everything.

  • And then I'll open the Lopes directory and let's get started with a simple old good for group.

  • So I'm going to open the main.

  • And this time, the idea behind this example ease difference, which should be called because we got beat, too, used to the old example.

  • That could be a bit for boring by now.

  • So this time we have our secrets algorithm that we made and we want to benchmark our algorithm and indeed make sure that it is running in the time that we think it is.

  • So what do you want to do is we want to run it multiple times and figure out the average running time, Okay.

  • And here we can number of tests or number of friends that we want to do.

  • And just thinking about that time actually rename this number off Franz, because that makes more sense.

  • Okay, so we have number of friends that we want to do.

  • We have a remain function and we have our four look, So as long as I eas last the number of fronts, we want to do it and keep incriminating that I variable over here.

  • So we pretty much just wantto obeyed secret algorithm 10 times in the loop.

  • But we want to do some.

  • But based on the description of these problem that we're dealing with, we're also interested in time.

  • So I did pull in this performance Dash now our module for the know Decker Systems.

  • And I'm simply saving storing it in this new variable.

  • And then what A simply do is I saved the start time orf each algorithm Iran.

  • And after it is done, I didn't save the and time and then I pretty much like, calculate the difference, meaning how long the secret algorithm was running for.

  • And then we simply increments these variable that will hold all over the running times off her algorithms.

  • And then what we do is at the end, we say total time is exactly that number of free dries is number off runs that we can work here.

  • And then we say that every joining time is we simply divide thesis total time by the number of France we actually did.

  • And we simply formative to three decimal places.

  • And in case of an error, we simply parrot over here.

  • So it's so it is really, is it?

  • The only confusing part could be this performance now, but that also should make sense.

  • And now if we open this process file, things are slightly different this time we again exports on functions.

  • This time we simply export one function, which is our secret algorithm after all.

  • And then we again used time and time and to measure the running time.

  • By the way, if you're wondering why we didn't simply us time and time and like we did in previous examples to measure this total time over here.

  • Well, it's because time and time that ends actually just outputs the running time in our terminal.

  • But we need to somehow store them in a variable and be able to divide them by the number of France.

  • So that's the reason why we needed to use this as well.

  • So now let's let me get back to this.

  • So what we do is we simply await some time.

  • But this time isn't static.

  • So instead, this is a small function.

  • They wrote little simply turn number between A and B.

  • So here we're returning numbers between one and seven inclusive, so both one and seven could happen, and then we simply multiply that number with 100.

  • And that's how we get our milliseconds that this secret algorithms should wait for.

  • So it's really simple, and it easily just made up for this example.

  • But now let me Randy's and let's see what happens.

  • So I'm going to navigate to 03 loops and then 01 Okay, And now, if executes that's example, we see multiple secret algorithm runs over here.

  • In fact, there are 10 of them.

  • We didn't see that the total running time.

  • So all of these values combined together is 5000 and nearly 300 milliseconds.

  • We didn't see that.

  • We get 10 3 tries and one And once we divide this pretend, we see that our secret algorithm is running for roughly 500 milliseconds on average.

  • So this is one example, um, in which you can use simple old good for lope.

  • And you can see how the regular four loop plays really nicely, which await.

  • We didn't do any new stuff, really.

  • We simply awaited what there we wanted inside of our four loop and everything was well, So now let's take a look at the for each, which I really like.

  • And I made a video about it in my ear six series.

  • And let's see what happens when we use it instead of these four.

  • Look so close both of those files and let me open the main door.

  • Jess.

  • Now, for this example, I wanted to create a slightly different example so that I keep things interesting and fresh.

  • So in this example, we're actually running a great of power plants, and we want to somehow group them together in a single ary and be able to quickly turn all of them on and off.

  • So we have this power plant class or here and let us first of all, take a look it That's so if I open this power plant file, we see that D.

  • C is a simple year six class that is called power Plants.

  • We have a construct er, and in that concert, we simply passing an I d.

  • No idea could be anything.

  • So that's just like the name that will assign to that power plant in particular.

  • And then we have to a sink functions to this class we have turn on and turn off and what we're doing, we're simply out putting that like turning on a power plant.

  • And then the name that we gave it and then we're using time in time ends to actually measure how long these turning on operation took.

  • And then we're using again the same a Wait, wait.

  • And we're getting some random number and we're multiplying that by 200 milliseconds, and then we simply do this for, like, to get in your life.

  • So that form, I think it's a bit prettier.

  • They're not function is exactly the same.

  • We're just like about putting different words to the consul.

  • Okay, so it's it's really easy to understand.

  • And now, inside of the main, what we're doing is we're creating a new car, a new empty array of power plants.

  • Then we're adding to that array a new power plant five times, and we're simply giving them an idea off Sierra 102 through 05 And then what we want to do is really quickly tow.

  • Be ableto turn all of them on and turn all of them off.

  • So we use the forage helper for our power plants array.

  • And then we get access to every power plant in that ray.

  • And for each power plant in that Arabi, Oneto await in operation off, turning it on, entering it off.

  • So let's see what?

  • Yep, It's so I'll navigate to that folder and I'll type note main And, as you can see really quickly, something he's really wrong and it's actually not even running.

  • So it says, syntax, error, unexpected indented fire power plant, which is a bit weird because we kind of defined it over here.

  • But the problem is simply that you can't use a way to key word inside of your forage.

  • So if you wanted to use for each with a wake, you unfortunately contador it.

  • But there are other ways that you can.

  • And one solution to this problem is using the four off, So we're going to take a look at that next.

  • So let me close this file and let me open this next example, which is exactly the same.

  • So I don't need to do any explaining we again here the same situation.

  • We again do the same things.

  • We again have the same class or here.

  • So the only difference is this time we're not using the forage, but we're using the four off, which is you simply start with four key words and then you write like the name that you want reference each and every element off summary, and then you simply type or a name.

  • So for every power plant that will be in the power plant three, we do something now like this needs to match r r a.

  • But these over here you can call it simply X.

  • If you want this just I knew variable for you.

  • That is scope for justice, block of code, and then you can use it over here.

  • So I'm going to on do that because this makes more sense.

  • But just so you're aware, this is this is the same that you head over here so you could call this one X as well.

  • Okay, So now in these 44 off, um, example, you can see everything is the same and simple.

  • Let's run it and see if this works this time.

  • So I'll go back and l a go in the four off example, and that started it off.

  • And as you can see, it seems to be working.

  • So we're turning on power plants.

  • So we turned on purple in 0102030405 And, well, that worked.

  • And then we proceeded to turn all of them off with this piece of code over here, and we turned them off.

  • So this is example how you can use the four off and how you can't use the forage.

  • So that should be main takeaway from these two examples.

  • Over here and now.

  • For the final example, let's take a look at the wild loop.

  • So I'm going to close both of these files and I'll never get here.

  • So this time we're back again in our benchmarking example.

  • So we're benchmarking our algorithm again.

  • Let me simply rename it like they did in the previous okay, in the previous example.

  • So we can't really similar.

  • So the Sikhs are great to meet the same.

  • So I don't need to do an explanation over here, but the main is a bit different.

  • I mean, I made it so that we really want to use while just so that I can demonstrate.

  • Why Lope.

  • So what he did is we kept this three tries variable that is equal to zero, and we have total time, which they zero.

  • And then we simply repeat this piece of code over here, while the number of rich guys are less than the number of France.

  • So these are here well, around 10 times.

  • And then again, we store the time before running algorithm restore the time after a needle.

  • Great.

  • Um and then we say the difference in these terrible over here Now, after each run of this algorithm, we want toe increment.

  • This ray tries otherwise This will be in infinite while look.

  • And then at the end, we simply out with total time number of three tries and every joining time.

  • This time we can either divided by number of Franz constant or weaken, divided by three tries because they will store the same number in the end.

  • So let me do that.

  • Let me run this example, Jay, You know what I mean And let's see what happens.

  • Some secret all great movie star trunk 10 times and D C zar every jungle time.

  • So this example simply wanted to demonstrate that you can use while and that you can simply use a way to key word in a while.

  • And everything works as you would expect it to.

  • So and this is it.

  • I have run out off examples, fortunately, so I didn't have anything else to show you.

  • But let's simply do a quick recap.

  • So we've seen the during devolution off chasing programming in Java script.

  • We had different approaches with dealing the case in code.

  • We started with callbacks.

  • We've seen that while they do get the job done, it isn't the prettiest could ever, and you can get really tedious too.

  • Follow the logic off the code that you wrote so that that is the downside of cold back approach.

  • Then we have seen that the next best thing for promises and in fact, promises we're also going to us promises in our ace in code.

  • You've seen that promise it'll function.

  • You've seen that if you have some legacy code or simply the march that you're using is implementing the callback interface, meaning it is expecting youto passing a callback function.

  • You can't really use it directly in your I think our function, but what you can do Eastern Dead function in tow, a promise, and then you can use it with a way to key words.

  • So promise is really important there.

  • What allowed the casing to actually function?

  • So be sure to, like, study on promises.

  • Then I briefed mansion generators.

  • Now I don't really care much experience using generators, so I didn't want to rush in and like create some examples because I don't think it's necessary, given that we have access to our tow a sink, a weight nowadays and then finally we've seen about sink awaits.

  • We have not only seen like difference in code that it produces into slide.

  • But I also like, walk you through all of these examples and you learn how you can do sequential things.

  • Using sync awaits this.

  • You've seen the potential issues.

  • You've seen the potential solution into strike catch.

  • Then we went over the barrel flow.

  • You have seen how you can use promise a total function over here.

  • And then we again seen some issues in some solutions.

  • And then last but not least, we've seen how you can use.

  • I think, a way to win.

  • You need to eat rate over through some data and we have discussed for loops forage four off.

  • And while so all of that should help you out in the future.

  • And I hope you learned something from this video, it is really long One.

  • So congratulations for sticking with me entered the end.

  • Hopefully you learn something.

  • It wasn't too complicated to follow me.

  • And if you like these, please leave me like if you dislike it, please This like it and if possible, let me know what I can do to improve in the future.

Hello and welcome in this video.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

A2 初級

異步/等待 - JavaScript教程 (Async/Await - JavaScript Tutorial)

  • 1 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字