11. JS Timing Functions Public

11. JS Timing Functions

Kostas Diakogiannis
Course by Kostas Diakogiannis, updated more than 1 year ago Contributors

Description

JS Intro to setInterval and setTimeout functions

Module Information

No tags specified

Context

Course's Objectives 1. To learn about timing functions and how to use them. 2. To learn how to execute code periodically, every a specific amount of time. 3. To learn how to make a part of code wait for a specific period until is executed. 4. To understand the basic concepts of asynchronous programming and callback functions.
Show less
No tags specified

Context

Timing events JavaScript gives us the opportunity to execute a part of code under given timing circumstances.  For example execute code periodically every a specific amount of time. Or wait for 2 minutes and execute code after. The syntax is clear, we specify which part of code (it is a function always) we want to execute, under which time condition. You can create timers, timer calculators, make things appear after a period of time and many many more. Attention: Both timing events (setInterval and setTimeout) run *asynchronously. *We will find out later what does this mean.
Show less
No tags specified

Context

Setting an interval function Set an interval function executes a specific piece of code periodically every when we define so. (every 5 sec, 5 mins etc). The function accepts 2 arguments, the first argument is a function that is going to be executed,  and the second argument is a number in milliseconds.  For example if we put as a first argument a function that prints 'Hello World' to the console, and 1000 milliseconds as the second argument, we will eventually print a 'hello word' message to the console every second. In order to stop executing we call the clearInterval function that accepts as an argument the name of the interval that we want to stop. Find out the setInterval documentation here
Show less
No tags specified

Context

TF-1 Create a last minute countdown Create a down to last minute countdown that begins from number 60 and every second reduces itself to 59, 58, 57, 56, 55 up to 0.  Any second you print to the console the number except when the number get's to 0 point, then a message like 'Game over' is being printed to the console.
Show less
No tags specified

Context

TF-2 Create a countdown until an event Create a countdown timer between the current  date and a future day that holds an event at least 3 months from now.  The countdown should count reversely and show how many days, hours, minutes and seconds remain until the event starts. The countdown should be updated every second.
Show less
No tags specified

Context

Setting a timeout function Setting a timeout function follows exactly the same principles with the interval, but this time the body function is not executed periodically until is cleared, but waits instead, for a given amount of time and executes itself only once. In this case if we put the same function as before that prints 'hello world' message to the console, and 3000 milliseconds, a 'hello world' message will appear to the console after 3 seconds but only once! It is mainly used for popping up windows, after 5 seconds for example,  (giving first some time to the new user to get himself/herself used to the content). Find out the setTimeout function documentation here
Show less
No tags specified

Context

TF-3 Alert Reminder Create an alert box, (by using the alert function), to remind the user that he has already spent 10 seconds in your page.  This alert box should be shown only once, and immediately 10 seconds after the page is loaded.
Show less
Show full summary Hide full summary