Scribd
Upload
1 views

Async Basic

Uploaded by

hitendar.s
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
1 views

Async Basic

Uploaded by

hitendar.s
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

Asynchronous Basic

Sandeep G
Who Am I?

- Engineer / Front End developer


- Worked in Software AG, MSFT, SAP
- 9 years of experience
- Worked in React JS, TypeScript, JS, CSS, HTML
- Built E-commerce platforms, ERP systems, Enterprise websites.
Agenda

● Arrow function and function hoisting


● JS Event loop
● setTimeOut(), setInterval()
Function Hoisting
Arrow function
How JS engine works

● JS is a single-threaded programing language. I.e. it performs one task at a time.


● It executes scripts/code from top of the file to downwards.
● It contains an execution stacks, where it pushes operations which needs to be
performed.
How JS Engine works

● If an operation takes a longer time, then you can not interact with your browser.
● A function which takes longer time to complete is called blocking function.
○ Technically, a blocking function blocks all the interactions on the web page.

Try changing it to -
n=1000000000000
How to avoid blocking function

● Put blocking function inside callback function


● A callback is a function passed as an argument to another function. This technique
allows a function to call another function. A callback function can run after another function
has finished.
JS Callback
JS inbuilt callback functions

● setTimeOut - executing a given operation after specified time(ms)

● setInterval - executing a given task repeatedly after a given time interval(ms)


Coding coming soon!
setTimeout with additional params
JS engine in detail WITH callbacks
JS engine in detail
JS engine in detail
JS engine in detail
JS engine in detail
What will be the output
ClearTimeout

It is being used when you want to cancel the


ongoing timeout, before it actually executes
the defined task.
setInterval

setInterval method repeats a block of code, every given timing event.


clearInterval
Thanks and Happy coding!

You might also like