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.
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.
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!
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! :)
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.
@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?
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.
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 - ruclips.net/video/w-jULX0D5cg/видео.html
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 - ruclips.net/video/0VVJSvlUgtg/видео.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.
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?
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.
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.
@@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.
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...
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)
@@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
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.
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?
@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 :)
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.
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.
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.
@@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
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.
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
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.
solid examples, comparisons, and commentary. keep up the good work boss!
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!
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! :)
This is a great video explaining Synchronous vs Asynchronous in JavaScript. Save it to your lists.
Sir, this is the best explanation of asynchronous on the whole internet. Your explanation and example were spot on. Thank You! SUBSCRIBED!
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.
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.
Simple but very informative !!! Thank you!
You drive the point very simple & clear @Steve Griffith !!! Thanks for such a nice explanation.
Simple yet Excellent explanation. THANKYOU!!
Thanks a lot, man! I learned so much from this video! You are truly the best teacher!!!
@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.
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.
Awesome content. You explained in a simple but yet effective way. Thanks
set aside, let the synchronous finished, and re-run. that's the key :)
thank you, now I can continue to learn more javascript :D
Amazing explanation! Thank you for humbly sharing your extensive knowledge.
Crystal clear explanation :-).Please adding more videos on java script concepts.Than you so much.
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.
Best explanation that i found on RUclips thank you sir.
So what does it mean when you get a call and caller if says async?
You are a fantastic teacher. Truly fantastic
when genius meets humility
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 - ruclips.net/video/w-jULX0D5cg/видео.html
Thank you very much, Steve. Learned a lot from this tutorial !
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 - ruclips.net/video/0VVJSvlUgtg/видео.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.
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.
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.
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.
Thank u . Finally i realised the idea of async properly .
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...
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)
I like this man much much cux he bring everything unique and precious stuff
Love it!! So help full in understanding why the logging is all over the place in my test code.
Very well explained 👌👌
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
I finally understood asynchronous code! Thank you so much!
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.
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
I might not be a smart man, but I know what Steve is - a damned good teacher!
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.
omg so helpful, I was gonna freak out when I was having so many problems with my JS debugging with JSON api's
Simply superb, You are a good teacher...
Thanks!
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.
Another very cool tutorial !
thank you! i am having problems understand the concept and now I somewhat got it
@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.
Keep going man you're doing a great job
thank you very much
Tnq u sir. Love from Bangladesh
That was a very good explanation! Thanks a lot!
Super clear!! methodical!! You rock!
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
perfect explanation. would love to learn from you man.
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.
Nicely thaught , understood everything 👍👍
Really good explanation, thanks!
Very well explained
excellent video, crystal clear
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
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 - ruclips.net/video/8aGhZQkoFbQ/видео.html
very very good Steve , thank you
well explained. thanks.
Awesome explanation
great video on this matterr , very helpful
Very much thanks bruh ,got clarity
Sir, you deserve more views and likes, here, take mine, and hope you live well!!
It helped me a lot thanks bro:)
Thank you very much. Now i really understood promise
The subtitle is disturbing mayn,
It was very helpful Thank you so much.... :)
Thanks a lot! I finally understand..
Excelente video, muchas gracias; seria bueno que hablaras un poco mas despacio para los que no somos agiles en el ingles.
awesome .... as usual
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.
Great and clear.
it helped. Thanks
Thank you
thank you very much
very helpful!
thank you!
this is gold
Alhamdulillah
Thanks, man
very effective!!
Perfect!
Awesome
🤯
Awesome :)
atleast increase the font sizes and cursor to a reasonable size while recording.
confusing
bull eye!
Read more
.
.
.
.
.
.
Show less