Skip to content

Commit 8e21a4e

Browse files
AnkitKumarMishra5AnkitKumarMishra5
committed
JavaScript: Introduction to Async JavaScript and Timer Methods
1 parent 94e1e52 commit 8e21a4e

2 files changed

Lines changed: 183 additions & 0 deletions

File tree

‎JavaScript/AsyncJS.html‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Asynchronous JavaScript</title>
7+
</head>
8+
<body>
9+
<!-- <button onclick="startStopwatch()">Start 1 min timer</button> -->
10+
<!-- <button onclick="clear()">Clear timeout</button> -->
11+
12+
<!-- BOMB EXPLOSION (setTimeout, clearTimeout)-->
13+
<!-- <h2 id="status"></h2>
14+
<button onclick="startBombTimer()">Start the timer for the explosion</button>
15+
<button onclick="diffuseBomb()">Diffuse bomb</button> -->
16+
17+
<!-- <button onclick="test()">Clear interval</button> -->
18+
19+
<!-- ROCKET LAUNCH (setInterval, clearInterval)-->
20+
<div style="text-align: center;">
21+
<img src="assets/rocket.png" width="300" id="rocket-img">
22+
<h2 id="status"></h2>
23+
<button onclick="startLaunch()">Start Launch</button>
24+
<button onclick="abortLaunch()">Abort Launch</button>
25+
</div>
26+
27+
<script>
28+
/*
29+
# Asynchronous JavaScript
30+
- Synchronous code: Executed one line at a time
31+
- Asynchronous code: Executed as an independent logic (Executes parallelly)
32+
33+
- JavaScript is a single threaded language
34+
- There is only one thread (main thread) which executed the complete JS code one expression at a time
35+
- Still, it can execute asynchronous code (with the help of other elements in JS Engine: Event Loop, Task Queues, Web APIs)
36+
*/
37+
38+
// console.log(1)
39+
// console.log(2)
40+
// console.log(3)
41+
// console.log(4)
42+
// console.log(5)
43+
44+
// setTimeout(() => {
45+
// console.log('Hi')
46+
// }, 3000)
47+
48+
// setTimeout(() => {
49+
// console.log('Test')
50+
// }, 5000)
51+
52+
// console.log(1)
53+
// console.log(2)
54+
// setTimeout(() => {
55+
// console.log(3)
56+
// }, 3000)
57+
// console.log(4)
58+
// console.log(5)
59+
60+
// console.log(1)
61+
// console.log(2)
62+
// setTimeout(() => {
63+
// console.log(3)
64+
// }, 0)
65+
// console.log(4)
66+
// console.log(5)
67+
68+
// setTimeout(() => {
69+
// console.log('Hi')
70+
// }, 3000)
71+
// setTimeout(() => {
72+
// console.log('Bye')
73+
// }, 2000)
74+
75+
// function startStopwatch() {
76+
// setTimeout(() => {
77+
// alert('⏲️ 1 min up!')
78+
// }, 60*1000)
79+
// }
80+
81+
// const timerId = setTimeout(() => {
82+
// console.log('Hi')
83+
// }, 3000)
84+
85+
// function clear() {
86+
// clearTimeout(timerId)
87+
// }
88+
89+
/* --------------------------------- */
90+
// let timerId
91+
// function startBombTimer() {
92+
// document.getElementById('status').innerText = 'Bomb will explod in 10 seconds 💣'
93+
// timerId = setTimeout(() => {
94+
// document.getElementById('status').innerText = 'EXPLODED! 💥💥💥'
95+
// }, 10000)
96+
// }
97+
98+
// function diffuseBomb() {
99+
// clearTimeout(timerId)
100+
// document.getElementById('status').innerText = 'BOMB DIFFUSED! 🎉🎉'
101+
// }
102+
103+
/* ---------------------------------- */
104+
// setInterval(() => {
105+
// console.log('Hi')
106+
// }, 2000)
107+
108+
// let count = 0
109+
// const timerId = setInterval(() => {
110+
// console.log(count)
111+
// count++
112+
// }, 1000)
113+
114+
// function test() {
115+
// console.log('CLEAR')
116+
// clearInterval(timerId)
117+
// }
118+
119+
/* ---------------------------------- */
120+
// let timerId
121+
// let countDown = 10
122+
// function startLaunch() {
123+
// timerId = setInterval(() => {
124+
// if(countDown == 0) {
125+
// clearInterval(timerId)
126+
// document.getElementById('status').innerText = `🚀 LAUNCH SUCCESSFUL!!`
127+
// return
128+
// }
129+
// document.getElementById('status').innerText = `🚀 Launching in ${countDown} seconds ...`
130+
// countDown--
131+
// }, 1000)
132+
// }
133+
134+
// function abortLaunch() {
135+
// clearInterval(timerId)
136+
// document.getElementById('status').innerText = `🚀 LAUNCH ABORTED ❌`
137+
// }
138+
139+
// let timerId
140+
// let countDown = 10
141+
// function startLaunch() {
142+
// timerId = setInterval(() => {
143+
// if(countDown == 0) {
144+
// clearInterval(timerId)
145+
// document.getElementById('status').innerText = `🚀 LAUNCH SUCCESSFUL!!`
146+
// document.getElementById('rocket-img').src = 'https://mir-s3-cdn-cf.behance.net/project_modules/source/e59b07112562445.6017104965538.gif'
147+
// return
148+
// }
149+
// document.getElementById('status').innerText = `🚀 Launching in ${countDown} seconds ...`
150+
// countDown--
151+
// }, 1000)
152+
// }
153+
154+
// function abortLaunch() {
155+
// clearInterval(timerId)
156+
// document.getElementById('status').innerText = `🚀 LAUNCH ABORTED ❌`
157+
// }
158+
159+
/* ---------------------------------- */
160+
/*
161+
# Timer methods:
162+
- setTimeout(): Execute code after a specified time
163+
- Syntax:
164+
setTimeout(callback, time)
165+
- Parameters:
166+
- Callback: Function to execute after the specified time
167+
- time: in milliseconds (ms)
168+
- Return:
169+
- timerId: Unique ID assigned to the timeout created by setTimeout method
170+
- clearTimeout(timerId): Clear the timeout created by setTimeout method
171+
- setInterval(): Execute code repeatedly after a specified time interval
172+
- Syntax:
173+
setInterval(callback, time)
174+
- Parameters:
175+
- Callback: Function to execute after the specified time repeatedly
176+
- time: in milliseconds (ms)
177+
- Return:
178+
- timerId: Unique ID assigned to the interval created by setInterval method
179+
- clearInterval(timerId): Clear the interval created by setInterval method
180+
*/
181+
</script>
182+
</body>
183+
</html>

‎JavaScript/assets/rocket.png‎

43.2 KB
Loading

0 commit comments

Comments
 (0)