Photo by Justin Veenema on Unsplash
Valentine Day-Feb 14th- Missed brunch date with my Lover JS (JavaScript)
Hi folks, as we all know today is Valentine Day. I planned a brunch date with my lover js but shifted it to eve date due to elections at my state and I considered voting as my right as well as duty. Ok, so coming back to the story, when I met js at evedate, I have to be ready since she was little upset , so I bought a special gift for her.
But when I met her, she told me to say "I am sorry Js." after every 1 second for the next 1/2 minutes (i.e. 30 seconds). Means literally I have to say 30 times "I am sorry". After listening her demand, I immediately accepted it.
I was thinking that I will use a for loop here and will set count to 0 and will iterate till count less than 30 and on each iteration , I will shout the message and increment the count.
For the same logic, the code can be written like this -
for(let count=0;count<30;count++){
console.log("I am sorry Js");
}
Output will be -
I am sorry Js (will be printed/logged 30 times in the console)
After seeing the output, Js shouted at me since she was already angry , so I never mind that. She said , you didn't understand my conditions , I told you to say "I am sorry Js" after every 1 second for the next 1/2 minutes (i.e. 30 seconds) , but you are just repeatedly saying without considering the time constraint which I have given you.
I said to her , I understood and let me try once more. But I had no idea how to do that . Then suddenly I thought why don't I use Web API named setTimeout , which is available as a global method, can be used from anywhere.
The global setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires.
Since I knew that setTimeout takes timer Value in milliseconds and 1000ms equivalent to 1 second,so I thought I will set the timer to 1 sec and I will pass a function as argument to setTimeout which will be executed after 1 second.
For the same logic, the code can be written like this -
setTimeout(() => {
console.log("I am sorry Js");
}, 1000);
Output will be -
I am sorry Js (that too after 1 sec , but only one time)
But since it only printing the statement one time only ,after 1 second , then how can I call this after a fixed interval of time, instead of me again and again writing this logic, what can I do. Later I reminded that there is one more WebApi available named setInterval which can solve my purpose.
The setInterval() method, repeatedly calls a function or executes a piece of code , with a fixed time delay between each call.
So I thought why not I write the statement inside the function which is passed as an argument to setInterval and also set delay to 1sec and hence after every 1 second interval, it will execute the function and thus my problem would be solved.
For the same logic, the code can be written like this -
But before running the code . A Warning- Don't run this code, If you run the code , the statement will be continuosuly logging at the console after 1 second interval .However if you executed the code still, just kill the terminal to stop the code execution.
setInterval(() => {
console.log("I am sorry Js");
}, 1000);
Output will be -
I am sorry Js (that too after 1 sec, repeatedly but not stopping)
Since, the code solved my half problem, but how to stop that interval is still the issue. So this time I went to search engine and search for the solution . Sometimes It's better to search for the solution , but before getting the solution, try to understand the solution, then it will give benefits too.
So, I get to know that setInterval method returns an interval ID which uniquely identifies the interval, so we can remove it later by calling clearInterval() method.
For the same logic, the code can be written like this -
let statementCount = 0;
const intervalId = setInterval(() => {
if (statementCount === 30) clearInterval(intervalId);
else {
console.log("I am sorry Js");
}
statementCount++;
}, 1000);
Output will be -
I am sorry Js (will be printed/logged in the console 30 times that too after interval of 1 sec, repeatedly and stopping once 30 times I have said this statement since statementCount would be equal to 30 that time and we are clearing the interval using clearInterval method.)
This time we got the correct output as per the requirement so that's how setTimeout and setInterval worked in Js.
So, after seeing my so much efforts, this time Js smiled and happied. Later I had given the gift to Js and we had an awesome eve date. And yes, I purposely kept the gift secret from you(though I can give you a hint and hint is RESTful API)!