JavaScript Tutorial For Beginners #42 - JavaScript Timers

Yo ninjas, in this tutorial I want to teach to you the amazingness of JavaScript timers :). Timers are used all over the show in JavaScript, in anything from popup forms to image sliders. They are a cool feature of JavaScript and well worth mastering if you want to create slightly more advanced interactivity!

The functions we use for JavaScript timers are:

setTimeout()
setInterval()

Any questions, just ask :)

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

========== Social Links ==========

[zvladd]

This is so clear and straight forward. Thank you!

[renukagargicollege]

Here is the code of CSS code for the lesson, i hope @Net Ninja its okay.
body{

background: #eee;

}

#message{

width: 400px;
background: #ddaaaa;
padding: 20px;
padding: 20px;
font-family: calibri;
font-size: 18px;
color: #444;
margin: 0 auto;
text-align: center;
border: 1px solid #ff7777;
font-weight: bold;
opacity: 0;

/*set transition up */
webkit transition: opacity 0.75;
-moz- transition: opacity 0.75;
transition: opacity 0.75;

}
#message.show{
opacity: 1;

/*set transition up */
-webkit- transition: opacity 0.7s;
-moz- transition: opacity 0.7s;
transition: opacity 0.7s;


}
/*#colour-changer{

width: 200px;
height: 200px;
margin:10px auto;
border: 1px solid #000;
background: #fff;

-webkit- transition: background 0.7s;
-moz- transition: background 0.7s;
transition: background 0.7s;




}
*/

[Martin]

Point of note on Line 16 var myTimer = setInterval(changeColour, 3000);

The setInterval method is invoked because this is not a function declaration, it's a pre-defined function known as a method. Normally if you put a function declaration stored inside a variable like "myTimer" it will not be invoked unless you do myTimer( ); afterwards.

Example:

function foo is stored in variable a, but will not be invoked until the line a( ); is executed

if you leave a( ); out of the code, foo will NOT be executed, it just stays locked inside variable a

let a = function foo(){
console.log("Hello");
};

a( ); <<< if you remove this line, it will not be invoked

But setInterval( ) will be executed due to it being a function call by itself. It returns a value to variable myTimer.

Which is the same as doing this (minus the return):

function foo(){
console.log("Hi again!");
};

let a = foo();

Where foo is a named function declaration, it becomes like the setInterval method
in that it will be called due to the parentheses ( ), but in this case there is no return made to variable a.

console.log(a); will show undefined as no return keyword was used.

In this next example function foo will emulate the action of setInterval more accurately in terms of being invoked to the variable, AND storing the return result in variable a.

function foo( ){
return 'This is returned to variable "a"';
};

let a = foo( );
console.log(a);

[mirjana]

Thanks for this tutorial, you've helped me finish a project :)

[Parasmani]

One of my favorite animation films. Thanks Net Ninja :)

[jensv]

Dude your videos are the best on youtube

[devinhernandez]

Great tutorials so far man, very helpful. I just have a question for the css portion here. where u have two paddings what does the second one represents? is the first one hight and second one from right. and also the margin, why u have 0 and auto. is zero for the top and auto for centring it?

[mindpower]

amazing videos, i am so thankful to you. One of the best tutorial videos which i have ever seen, great work.

[shannonmyers]

I just realized this whole video is a javascript version of the animation property

[deeproy]

even modulo will help to reset the counter problem

[OliverGomes]

Sweet ! I wish you did more simple JS project like this :D

[taniamollah]

Great tutorial... i have a question, suppose we want to restart the timer again on clicking on the container.. how to do that??

[chaus]

In the final code we have a function changeColour and var myTimer but why is the block changing color even if we haven't called the change color function....we have just defined it

[plutonio]

Hi, thanks for the videos.
If I want to restart the setInterval after the clearInterval, how should I do it?

[mattsmith]

for function changecolor() {
....
};

why don't we add array 'colors' and counter as parameter?

[mickzeh]

we usually call/fire functions by putting () at the end, right? like myFunction(). So can some1 explain, why we don't need to put () here ---> setTimeout(showMessage, 3000); ?

[franklyndappah]

Hello Ninja…
How about replacing the colours with images, it’s not working, how do I go about that

[birsingh]

How to write function to resume the timer again?

[dheemanthm.d]

Hey, how to restart the same color changer function again.Because once clearInterval() how can i restart color change

[Martin]

@The Net Ninja How does Javascript know to use the method setInterval now that you have placed it inside the variable myTimer?

When it runs the program as normal (without var myTimer) and skips through the array I don't see how it can execute the setInterval method if it is then hidden inside a variable.

THE ANSWER TO MY QUESTION IS ABOVE THIS ONE