asynchronous programming.
1. what is synchronous ?
ans:
Every Task would be running line by line.
all the code running line by line. at a particular time, only one task is happening.
one task depending on the second task and so on.
multiple functions run at the same time line by line.
all the code running line by line. at a particular time, only one task is happening.
one task depending on the second task and so on.
multiple functions run at the same time line by line.
asynchronous have three things
i. call back
ii. promises
iii. Async/Await
call back
// This is a call back function
setTimeout(() => {
console.log("This is a call back function.");
}, 3000);
// beacause we call back this function after 3 seconds.
setTimeout is not a JS function.
it is a web api in node JS.
it is a web api in node JS.
function greet(){
console.log("Hello Earth.");
}
function welcome(anotherFunction){
anotherFunction();
console.log("welcome to this world.");
}
welcome(greet); // greet is not a callback function (this sync )
setTimeout(greet,2000); // greet is a callback function (this async)
when ever we passing a function as an argument in the another function then we call it call back function.
nothing will print because of clearTimeout function.
let greet = setTimeout(function(){
console.log("Hey");
},2000);
clearTimeout(greet); // nothing will print because of clearTimeout.
set time interval
this setInterval function will print "Hello" after every 3 seconds
// this setInterval function will print "Hello" after every 3 seconds
setInterval(function(){
console.log("Hello");
},3000);
setInterval(function(){
console.log("Hello");
console.log("It will print every after 3 seconds.")
},3000);
now it would not print because of clear Interval.
let interval = setInterval(function(){
console.log("Hello");
console.log("It will print every after 3 seconds.")
},3000);
// now it would not print because of clear Interval.
clearInterval(interval);
it will print 4 times after it will be clear. (print every after 3 seconds)
// it will print 4 times
let i = 0;
let interval = setInterval(function(){
if(i > 2){
clearInterval(interval);
}
console.log("Hello");
console.log("It will print every after 3 seconds.")
i = i +1;
},3000);
output:
Hello
It will print every after 3 seconds.
Hello
It will print every after 3 seconds.
Hello
It will print every after 3 seconds.
Hello
It will print every after 3 seconds.
it will be print 3 times after will be clear (print every after 3 seconds)
// it will print 3 times
let i = 0;
let interval = setInterval(function(){
if(i > 2){
clearInterval(interval);
}
else{
console.log("Hello");
console.log("It will print every after 3 seconds.")
}
i = i +1;
},3000);
output:
Hello
It will print every after 3 seconds.
Hello
It will print every after 3 seconds.
Hello
It will print every after 3 seconds.
it will be print 2 times after will be clear (print every after 3 seconds)
let i = 0;
let interval = setInterval(function(){
if(i >= 2){
clearInterval(interval);
}
else{
console.log("Hello");
console.log("It will print every after 3 seconds.")
}
i = i +1;
},3000);
output:
Hello
It will print every after 3 seconds.
Hello
It will print every after 3 seconds.
Time counter apps
Js file
document.getElementById("submit").onclick = (event) => {
console.log(event);
let target = document.getElementById("dateTime").value;
console.log(target);
let currentDate = new Date();
// time dufferent in mili seconds
let diffTime = new Date(target).getTime() - currentDate.getTime();
let days = Math.floor(diffTime / (1000 * 60 * 60 * 24));
document.getElementById("days").innerText = days;
let hours = Math.floor((diffTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
document.getElementById("hours").innerText = hours;
let minutes = Math.floor((diffTime % (1000 * 60 * 60)) / (1000 * 60));
document.getElementById("minutes").innerText = minutes;
let seconds = Math.floor((diffTime % (1000 * 60)) / 1000);
document.getElementById("seconds").innerText = seconds;
console.log(days, hours, minutes, seconds);
};
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>time counter</title>
</head>
<body>
<input type="datetime-local" id="dateTime" />
<button id="submit">Start</button>
<ul>
<li id="days">Days</li>
<li id="hours">Hours</li>
<li id="minutes">Minutes</li>
<li id="seconds">Seconds</li>
</ul>
<script src="./index.js"></script>
</body>
</html>