11. JS Timing Functions Öffentlich

11. JS Timing Functions

Kostas Diakogiannis
Kurs von Kostas Diakogiannis, aktualisiert more than 1 year ago Beitragende

Beschreibung

JS Intro to setInterval and setTimeout functions

Modulinformationen

Keine Merkmale angegeben

Kontext

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.
Weniger sehen
Keine Merkmale angegeben

Kontext

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.
Weniger sehen
Keine Merkmale angegeben

Kontext

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
Weniger sehen
Keine Merkmale angegeben

Kontext

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.
Weniger sehen
Keine Merkmale angegeben

Kontext

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.
Weniger sehen
Keine Merkmale angegeben

Kontext

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
Weniger sehen
Keine Merkmale angegeben

Kontext

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.
Weniger sehen
Zusammenfassung anzeigen Zusammenfassung ausblenden