Understanding Synchronous vs Asynchronous JavaScript
ฝัง
- เผยแพร่เมื่อ 19 ม.ค. 2018
- Most of what you write in JavaScript is Synchronous procedural code read from top to bottom and executed in the single main thread of the JavaScript process.
However, that doesn't mean that JavaScript can't run code in an Asynchronous way.
The video discusses the differences and how that can unexpectedly impact the code that you write.
Promises Playlist: • JavaScript ES6 Promise...
Code GIST: gist.github.com/prof3ssorSt3v...
Whenever I'm stuck on something with JS and I see a video about the concept with your name by it, I breathe a sigh of relief. Thanks for all you do!
If anybody wants to learn javascript seriously, this is one-stop channel that can guarantee to satisfy anyone with top notch quality. As always thank you.
omg only video that actually helped me learn async js. love you and you made the world a better place. i cant express how thankful i am
Hi Steve Griffith. Thanks for this clear explanation. Examples/demo always help understanding things. I always wondered that why sometime javascript works asynchronously and sometimes synchronously. Now it is almost clear. People like you on youtube and other platforms are making our lives easier! Can't thank you enough! :)
solid examples, comparisons, and commentary. keep up the good work boss!
This is a great video explaining Synchronous vs Asynchronous in JavaScript. Save it to your lists.
You drive the point very simple & clear @Steve Griffith !!! Thanks for such a nice explanation.
Awesome content. You explained in a simple but yet effective way. Thanks
This is the best video about Synchronous and Asynchronous code concepts, I have ever seen. You are very good at teaching, Thanks a lot !
Ty for the video, very clear :) Keep it going. As a matter of fact, I spend 2 hours reading an article and I understood way better form your vid.
Amazing explanation! Thank you for humbly sharing your extensive knowledge.
Sir, this is the best explanation of asynchronous on the whole internet. Your explanation and example were spot on. Thank You! SUBSCRIBED!
Thanks a lot, man! I learned so much from this video! You are truly the best teacher!!!
Simple but very informative !!! Thank you!
Simple yet Excellent explanation. THANKYOU!!
Love it!! So help full in understanding why the logging is all over the place in my test code.
omg. thank you so much. ive read 5 different blogs and watched 3 other videos and this is the only one that made sense to me :D
Thank you very much, Steve. Learned a lot from this tutorial !
Crystal clear explanation :-).Please adding more videos on java script concepts.Than you so much.
I've been searching all around trying to get the answer for an issue I'm having - I'm making a DB call and trying to do something with the result but it keeps returning only after the action has already been taken - and I found all sorts of possible complex solutions that didn't really lead me anywhere. I had already lost hope and you provided me with the solution.
It's simple, straight to the point and very well explained.
Really appreciated! I subscribed for that reason alone!
set aside, let the synchronous finished, and re-run. that's the key :)
thank you, now I can continue to learn more javascript :D
Best explanation that i found on TH-cam thank you sir.
I finally understood asynchronous code! Thank you so much!
I have watched tons and tons of videos on this subject. Only yours cleared my confusion. I don't feel satisfied if I fail to say that you explain things in a manner many don't.
thank you! i am having problems understand the concept and now I somewhat got it
That was a very good explanation! Thanks a lot!
Steve I'm sure you get this a lot, but I'm gonna say it anyway. Your content makes me love learning. As a professor you achieved highest possible "skill level", you make people fall in love with subject you teaching, it's priceless.
Always nice to hear. Thanks.
Keep going man you're doing a great job
thank you very much
omg so helpful, I was gonna freak out when I was having so many problems with my JS debugging with JSON api's
You are a fantastic teacher. Truly fantastic
Thank u . Finally i realised the idea of async properly .
Another very cool tutorial !
Really good explanation, thanks!
I like this man much much cux he bring everything unique and precious stuff
perfect explanation. would love to learn from you man.
Super clear!! methodical!! You rock!
excellent video, crystal clear
great video on this matterr , very helpful
very very good Steve , thank you
It helped me a lot thanks bro:)
Thank you very much. Now i really understood promise
Very well explained
Simply superb, You are a good teacher...
Thanks!
Very much thanks bruh ,got clarity
Nicely thaught , understood everything 👍👍
Hi Steve,
How about async & await in this case ?Could you do another video? I've read in MDN docs the syntax could be more simpler than using promises in some cases.
I will be doing videos on Async, Await with and without Promises. Not sure exactly when but in the next couple months.
I've made a couple on async and await this summer. If you search for "async' from my channel home page you will find them.
is there any way to run lets say setTimeout function right away and not put it aside? Like in you example:
let a3 = 100;
setTimeout(function(a3++)=>{
}, 1000);
console.log(a3);
If I want to increment a3 every second right away before the next line of code runs, is there any way?
No. setTimeout is an asynchronous function. It will always be set aside to be run later. Even if you set the time to zero, it will still be set aside.
well explained. thanks.
awesome .... as usual
It was very helpful Thank you so much.... :)
Awesome explanation
13:13 can I ask a simple question?
why on line 53 we're getting resolved, and on line 49 we're getting pending. and we're using the same function on both which is (setTimeout)
shouldn't we get resolved on line 49 since we're resolving it?
Oh, I figured it out after watching the Promise series. (we have to use .then to resolve it)
I've been struggling with these async concepts for months. now I get it. thank you, Steve. Your videos are always the best.
Hi Steve, Thanks for the wonderful explanation. I have one query, Javascript keeps aside the async call from the main thread while execution. In this case, Promises are also async then why it executes before the setTimeout function gets executed.
The setTimeout doesn't get called until the Promise runs. p becomes a container for a pending Promise. The Promise is a container for whatever code you want. The Promise runs in order to be resolved or rejected. At that point the setTimeout gets put aside as an async operation. When the setTimeout finishes its delay it tries to run its internal function. This internal function calls the resolve function for the Promise. The Promise inside p is now resolved and will pass its return value to the then( ) method of the Promise (if there is one)
@steve Griffith : please i need help with Unit Testing - Jamsine ,
and unit testing in general
I'm new to the topic in general and i am kinda lost at their Site and their documentation don't know where to start .
any videos , articles and resource will help.
thanks a lot :)
I don't currently have anything on Jasmine. Please add it to my tutorial request video or upvote people asking for the same thing.
Tnq u sir. Love from Bangladesh
when genius meets humility
So what does it mean when you get a call and caller if says async?
Thanks a lot! I finally understand..
@13:06:
I put the same code in CodeSandbox - but unlike in your console, ma setTimeout(log(p) still throws an 'Promise pending' isntead of 'Promise resolved'.
Question:
Is it because of CodeSandbox or did Javascript change during the years?
JSBin and CodeSandbox don't run code in the same way as if you run it in the Terminal with NodeJS or in the browser directly.
Very well explained 👌👌
Hi Steve, is there a way to make your own custom asynchronous functions like settimeout? I know you can do it with async but i was wondering how it was done before that was introduced? I'm not sure how to start something running inside a function, have it complete the other code outside the function in the mean time and then go back to the call back after. Thanks
Promises is the basic structure that you can use to make your own async functions. Somethings in HTML5/JS are async by nature. XMLHttpRequest was one of the early ones along with setTimeout. With HTML5 a lot more were added - geolocation, localStorage, database, file access, etc. Callback functions are basically asynchronous. Events can be thought of as asynchronous. Anything that is off the main stack is basically asynchronous. The new async await is just a Promise wrapper around things.
@@SteveGriffith-Prof3ssorSt3v3 Thanks Steve, much appreciated.
Great and clear.
Great video, But I have a question, so sync code runs in order then is the async code also runs in order after the sync finishes executing ? meaning are all the async code runs on the same thread so it execute in order?
Moustafa Mohsen basically yes.
I might not be a smart man, but I know what Steve is - a damned good teacher!
So I've been learning html, css, and javascript, I even have a noob portfolio. I'm going through your videos and preparing for interviews. If you can help me in any way or direct me somewhere please do. Thank you for explaining content man. I appreciate you Steven...
very helpful!
it helped. Thanks
Steve, thank you very much for a simple and well thought out example and your explanation. You are the best after Tony Alicia's videos on JavaScript.
I think you should put a course on Udemy. Let me know if you have a patreon account.
Thanks. I dont have a patreon account. I do have a Udemy account but decided to keep posting my videos here for free for everyone
Thanks Steve! Very good explanation. By the way, do "let" and "const" keywords hoist to the top? I thought declaration of these stays on the same line
All JS variables hoist to the top of their scope. I have a video on let and const if you need help on their scoping
@@SteveGriffith-Prof3ssorSt3v3 Okay, thank you!
@@SteveGriffith-Prof3ssorSt3v3
Thanx for the good explanation! One mention regarding let variables:
Acording to w3schools and othe sources to Variables defined with let are not hoisted to the top.
Using a let variable before it is declared will result in a ReferenceError.
The variable is in a "temporal dead zone" from the start of the block until it is declared:
Example
// you can NOT use carName here
let carName;
Source: www.w3schools.com/js/js_let.asp
is this concept the same for every other language? For example c#, does it work exactly the same or is there a difference in sync and async concept on different languages?
Thanks for the videos, professor
The event loop and async / sync programming here is specific to JavaScript. Other languages like Dart or C# have asynchronous concepts but they each have their own approaches.
Here is more about the JS sequence - th-cam.com/video/w-jULX0D5cg/w-d-xo.html
very effective!!
Thanks, man
thank you very much
Is there a way or tools to Asynchronous javascript files for a non-developer?
Asynchronous code is not a thing that you do. It is a feature of the language. To use asynchronous features you need to program them. It is development work. If you want to program then you need to learn how to program. There is no shortcut.
@@SteveGriffith-Prof3ssorSt3v3 Thanks steve :( well, it seems heck of a task learning programming. I would rather rely on developer support for now.
really... great and very well understandably video ..!! but is there any rule Synchronous code run first and Asynchronous later?
It's not a rule, it has to do with how JavaScript handles the event loop. There is a main stack of code that has priority. It runs first. When something that is asynchronous is encountered, it gets set aside, off the main stack, to be run later. That is just the way that JavaScript works.
For more info, watch this great video - th-cam.com/video/8aGhZQkoFbQ/w-d-xo.html
Since promise and setTimeout both are async function then why is promise is running before setTimeout when promise is written after setatimeout
The Promise object is created synchronously. The result of the Promise is the thing that is async.
thank you!
this is gold
Perfect!
I have developed web app which heavely used synchronous xmlhttprequest ( ajax) call. I am planning to deploy web on local server. Will my code break down near future when major browser stop supporting synchronous call? Please help, i can't find right forum to discuss it
Yes. Synchronous support with xmlhttprequest is being removed. It is already limited. You should update your code to use Promises through fetch( ). With the async - await feature added in ES6, you can create synchronous handling of the requests, if it is really required.
A better practice is to design your web site/app to work without locking the user interface (which synchronous calls do). You can display indicators that information is being loaded. You can let the user continue to use the page while they wait.
@@SteveGriffith-Prof3ssorSt3v3 thanks, what if i used old browsers? is it still work or not? I am using local server.
@@mr.techno-era7474 IF you are using old browsers then you are using the old JavaScript engines that come with them. Therefore the old code can still run. However, old browsers eventually stop being supported. If you ever have a reason to replace your computer (infected with a virus, hardware failure, etc) you won't be able to get the old browsers any more.
I would urge you to move away from the old technology, the old xmlhttprequest, and jQuery. The sooner you do it then the sooner you won't have to worry about being in a situation where your site will stop working.
@@SteveGriffith-Prof3ssorSt3v3 Ok but why are they suddenly removing it? If someone doesn't drive bus well then we teach them, not instruct them to fly airoplane instead... Replacing code with asychronus call cause me really pain.. But, there is no solution, right.. ( no backward compatibility, right??)
This change away from xmlhttprequest and the security issues that it has started about 8 years ago.
The changes are being made for good reasons. We replaced horses and carriages with automobiles. Now gas engines are being replaced with electric engines. Changes will always happen, it is just the pace of change that is increasing. The new methods are not just there to have something new. They were built to be better.
Awesome
Awesome :)
Please explain clearly what you mean by "set aside to let the synchronous stuff finish first"? Does that mean the setTimeout lines are literally skipped until the other lines of code have finished running, after which the code goes back to the setTimeout lines and executes them in their respective order??? Is that what's happening?
Here is a video I did years ago on setTimeout and other time functions - th-cam.com/video/0VVJSvlUgtg/w-d-xo.html
When I say set aside, I mean that the function that is passed to setTimeout is put into a waiting area. It waits there until the time passed to setTimeout has expired. Then it is moved to a pending area that waits for an opportunity to be run. It is allowed to run once all the code on the main thread has completed.
Thank you
Excelente video, muchas gracias; seria bueno que hablaras un poco mas despacio para los que no somos agiles en el ingles.
Sir, you deserve more views and likes, here, take mine, and hope you live well!!
Great video, but my man...did you record this in the library??? You can talk louder
My old videos were with a poor mic. All the new ones are much better
@@SteveGriffith-Prof3ssorSt3v3 Understood, I'm still giving you a thumbs up, subscribing and telling all my friends how awesome your vids are.
how can i write async function without
---async await
There are things in JS that are asynchronous - Promises, Fetch, setTimeout, localStorage, DB, etc. You don't choose to make them async they just are. Async - await is to be able to treat async things in a synchronous way. Without async-await you need to use the then( ) for Promises or the callback functions for the others.
@@SteveGriffith-Prof3ssorSt3v3
if i want write asynchronous code in java script , how can i write ?
@@talhabilal4069 you just use the methods that are asynchronous - promises, fetch, setTimeout, setInterval, web storage, file system, database, geolocation, things with callbacks. Each has it's own code. You need to learn each object.
If you want to turn something else asynchronous then wrap it in a promise or an event listener
@@SteveGriffith-Prof3ssorSt3v3 thanks
The subtitle is disturbing mayn,
Alhamdulillah
The explanation is interesting. But the sound is a way too low to catch.
Yeah. This was just shortly before I got my good microphone. All the newer videos have much better audio.
🤯
bull eye!
confusing
atleast increase the font sizes and cursor to a reasonable size while recording.
Read more
.
.
.
.
.
.
Show less