JavaScript Tutorial: setInterval & setTimeOut | Web Development Tutorials #58

Guys in today's video we are going to talk about setTimeOut & setInterval What do these functions do? And these both are amazing functions. I will tell you how useful they are in web development. And how by just using syntax, How you can master them? So quickly what we will do? Here we have already seen 57 videos. Quickly we will make tut 58. And after adding boiler plate what will I do? Firstly I will write Javascript And here I will write set timeout. And clear timeout. And along with that We

will do div.container This is a container. I am just writing this is a container, nothing else. And here my javascript I will write that. Here I will write this is tutorial 50. I know spelling of this. To show you that I will correct the spelling. Now , I will zoom here I will open live server and show you. Which means by doing go live. I did go live. Right click inspect. I went in console. And here look it is written this is tutorial 58. Ignore this fab icon error. Now, here this is a containe

r. And this is tutorial 58 is here. Now here will talk about set timeout and set interval. Look, what happens sometimes? When we want to run function, we directly run function. But sometimes we want That function after some time, Or else after an interval It keeps on running repeatedly. And if we want like this You can use set timeout and set interval. So we will see one by one. We will first see set timeout. What is set timeout? Set timeout does Allows us to run the function. Once remember this

, just one time. After the interval of time ok. Similarly we have clear timeout. And what does clear timeout do? Allows us to run a function. Instead of once it is just repeatedly. And over here After a time, After the interval of time ok. And her I will save it. And comment this two line. And we can see them in action. Here now I will make a function and name it greet. And it does nothing. It does console.log and writes Hello, good morning. Good morning, I will do control s By adding a semi col

on If here I do Greet( ) Then no surprises. Here hello good morning will be printed. But if I write like this, And I do like this I will write set timeout Now look if I write set timeout, then one snippet arrives I will give timeout in milliseconds Ok, I will do 2000. 2000 milliseconds means 2 sec. So I will do 5000 and not 2000. So that after 5 sec what should run? My greet runs. Now, this thing that you can see is a function. So here I can give a function too. Like in this way I can do greet.

First argument function. And what is second argument? The time after which it should run. So as I will save this file, And I will quickly reload and look, After 5 sec My greeting is going to arrive. Look this is here. After 5 seconds hello good morning. Is written on my screen. Now, consider over here, if there was a name And if it worked like this, Which means it will give hello good morning harry Then I pass an argument for this. If I would like to run like this, Then I will do like greet(harr

y) And I will run this Hello good morning harry will come but, What should I do if I want to run it like this. With the help of set timeout. Then I will give harry as a third argument. Of what? Of set timeout. So I will give harry as third argument of set timeout. And after that look, hello good morning harry will come. After 5 secs it will arrive . Look over here. Time is going now on. And look hello good morning harry came ok. So in this way you can use it. So this was out set timeout function

. Now, you can pass multiple argument too. Like suppose harry. And after that, Along with name suppose If you want to add Bye text too, Then you can do something like this. Suppose I want to add bye text too. I will write bye text. And suppose my bye text is take care. Then in this way I will write take care. And when I will reload look what will happen in 5 secs. Just wait for 5 sec. And look over here, hello good morning harry take care came. So I can pass multiple argument to my function. So

I just wanted to tell this to you guys. Now, here I will talk about one mistake ok. And you guys will tell me what is the mistake. And what will I simply do? Of set timeout Firstly the call of this set timeout I will hide it ok. Now here I am adding a new set timeout call And you guys tell me what is the mistake in it. And it won't run I will tell you. I wrote greet. And in timeout I wrote 2000. Firstly tell me will it run or not? And if not then why not? And if it runs then it will run. We kno

w that. So I will give you guys 3-4 secs. Write comments below. And then I will tell you why it won't run. I hope you have figured out You must have commented below. Firstly look over here it is written undefined undefined. And why is it happening? We will see that now. So here when set timeout greet And 2000 is written so firstly it came quickly look I run it. I run this. Look quickly it came. I ran it and came quickly. I ran it and came quickly. I did not need to wait for 2 sec. Even if I do i

t 12 second Then too Look it happened quickly. It is not happening at 12 sec interval. So the mistake is I added this parenthesis. I will come up again. Look over here I did not add parenthesis. So in the syntax of set time is just the name of set timeout. There are no parenthesis and all. You don't need to call function inside set timeout. You just have to write set timeout. And give name of the function. So I will write over here. Wrong as it is calling the function. Inside set timeout ok. So

you can't call a function inside set timeout. It is a wrong thing. You can't ruin this syntax like this. ok. Now, here we will talk about clear timeout. Now we saw this set time out. If over here, this time out = I give this and And I do conole.log(Timeout) over here So look what it gives me. It gives me a unique id. And what is that unique id? That is the unique id of set timeout. This 1 means that, With this id this set timeout call I can clear it with clear timeout. So here if I write somethi

ng like clear time out And inside it I give it's id Which in this case was 1 I will copy this. And if I run it And if I run this firstly Then look my set timeout call will not run. Because I have cleared this timeout. So if you want to clear it on the basis of some logic Which mean you want that this time out should be cancelled Now suppose you scheduled it for 5 sec. And below you interpret such logic Now, you want the previously scheduled I should not have done that scheduled. And maybe after

10 secs you are going to ask user To sign up And user signed up 10 secs before only. Now, what will you do? It is a very good example. Look, you have a website In that what you have done? You thought that let user read the article After 20 secs I will ask them to sign up. But in 20 secs only he quickly signed up on the website. Then your set timeout call will be a waste. If the user will see and say sign up I did it, now how should I do? So to avoid that thing What can you do? When you are doi

ng sign up and filling the final form Then along with filling the sign up form You can do clear timeout And to that you can give time out. And as it will happen, I will run it, after 5 secs my set timeout call won't be visible. Why can't I see it? It won't be visible because I cleared it with clear timeout. So this set timeout returns time out id. And you can use that id With clear timeout. To clear this timeout So set timeout Will return a timeout id And after that you can add it to clear time

out. And as you will do like this Then what will happen? Then your time out will get cleared. Which means the function you gave in set timeout It won't run. The set interval function That also works like this. And what will I do over here now? I will remove timeout's calls in. And now I will talk about set interval. Now, if I talk about set interval If I will run then you will understand. Suppose every second I want to run which one? I want to run greet. In every sec so look over here, In every

second it is happening. Hello good morning undefined undefined. Why is undefined undefined coming? The bye text and name call I have not given. So I will give that too. Harry and after that Suppose I want to give What should I give it? I will give goodnight. It is a very strange thing. Hello good morning harry good night. Look, this is running repeatedly. And your console of browser It has a number Instead of printing repeatedly it thinks that Why not add a number 11 times. What will happen beca

use of that? For user it will be easy to watch. So here this number is getting increased. It means I am printing same output. Repeatedly ok. So like this what can we do? In this way repeatedly in every sec You can run it. And it is a same syntax which we had for set timeout. So set interval is also same as set timeout. So look over here, What does set interval return? Timeout's id Ok, clear I will write interval id. I will properly give its name. And I have a clear interval too. I also have a cl

ear interval function Which I will do interval id, And now if I will run it, Then look it won't run for 1 time also. As this thing will run, After that I already cleared it. Which means I said something like this, Clear this interval Now I don't want this. So suppose if I clear interval after 20 secs Which means I will add set timeout. I don't want to confuse you guys Just understand that this interval id I made it equal to set interval And same syntax which I discussed in set timeout. I used th

at Then in clear interval I gave interval id. And exactly same thing I did over here , so It's very good application is You want to display a time. And how can you display time? I will tell you guys. So what will I do? I will make function. And I will name it as Displaytime( ) And after that what will I write over here? Time = I will write new Date( ) Firstly I will do console.log( Time) And after that what will I do? I will write document.getelementbyId And what will I do over here? I will wri

te Time and after that what will I do? What did I do over here sorry. I will write .innerhtml = And here I will write time ok. Now, I will make a span Whosoever 's id will be front in time. So let's do one thing over here. Time now is And here I will make span, id time. Now, what will I do over here? What did I do? have populated the With help of display Now, what will I do over here? In set interval I will write In every 2 secs I would want that my time gets updated. So I will run display time

in every sec. And look over here I have made this time look. I quickly made a website, So when you want to add time to your websites, So can do like this. Time now is and look Time is running over here so you guys can display it. And here this was a very simple example. And some people believe that thing , It is hard to do this. Rather it is not at all hard doing this. You can easily make a clock You can make a good clock. You can make a stock box. By using this simple thing. And JavaScript, th

e modern JavaScript Which I should say as very powerful. Your all favorite things You can do very easily, in 1-2 lines code. So I hope you understood this video. And set interval , clear interval Set time out , clear timeout. You all must have understood. this. Now, here I just want to say that If you haven't accessed playlist, Then kindly access this playlist. And along with that By clicking here book mark And by clicking here if you haven't saved Then do that too. And along with that You will

get all source code in description So definitely checkout. And I will quickly update All the links that are there inside it. So for now only this much guys for this video. Thank you so much guys for watching this video. Don't forget to like the video. And I will see you next time.