I timer di JavaScript
Posted by vanni on Friday, 20 April 2018
In questo video vedremo come JavaScript gestisce l'esecuzione di funzioni differite nel tempo, parleremo, infatti, di 2 metodi dell'oggetto window per ritardare l'esecuzione di parti di codice: setTimeout() e setInterval().
Questi 2 metodi sono importantissimi e quindi molto usati dai programmatori per le finalità più svariate come: animazioni, comparsa/scomparsa di banner ed elementi del DOM, forzare parti di codice ad essere eseguite in maniera asincrona.
Il primo metodo: setTimeout(), ritarda l'esecuzione di una parte di codice o funzione per un lasso di tempo specificato dal programmatore. Il secondo metodo: setInterval(), esegue lo stesso codice ad intervalli regolari separati da uno specifico lasso di tempo. Entrambi i metodi necessitano di 2 argomenti: il primo è una callback che racchiude il codice che deve essere eseguito e il secondo argomento è il tempo in millisecondi che deve essere atteso prima di eseguire il codice.
In questo video parleremo anche i 2 metodi usati per cancellare questi timer: clearTimeout() e clearInterval().
Infine, vedremo un esempio di come creare un'animazione di un elemento DIV HTML usando uno di questi timer, faremo spostare il div orizzontalmente da una parte all'altra della pagina web.
Note al video:
Si lo so, quello che nel video chiamo asse delle "y" è invece l'asse delle "x". Me ne sono reso conto appena ho finito di registrare, ormai ho una certa età...
Trascrizione: (click per espandere)
salve a tutti in questo video parlerò
degli dei timeout ovvero dei timer di
javascript javascript ha due tipi di timer
uno che esegue una funzione dopo un
determinato lasso di tempo e un altro
che dopo un determinato lasso
di tempo esegue una la stessa funzione a
intervalli regolari i timer sono
molto usati in javascript per eseguire
diverse operazioni farò anche vedere un
esempio intanto vi faccio vedere come si crea
un timer allora io scrivo una funzione e
la chiamo funzione saluta e dentro ci
metto un semplice console.log dove io
voglio visualizzare un messaggio con
scritto ciao
e poi io qui setto il mio timer allora
sarebbe window.settimeout
eccolo qui dentro ci passo come accetta
due argomenti come primo argomento ci
passò la mia funzione però senza le
parentesi tonde e come secondo argomento
ci devo specificare il tempo dopo il
quale io voglio che questa funzione
venga invocata e il tempo va specificato
in millesecondi quindi se io metto per
esempio mille vuol dire dopo un secondo
diciamo che io voglio che intervenga
dopo tre secondi e quindi metto 3000
andiamo a vedere l'output quindi adesso
fra tre secondi quindi verrà
visualizzato il mio saluto eccolo qui
come vedete dopo tre secondi è stato
invocato la mia funzione saluta allora
vi dico già che usare window
che qui non è obbligatorio quindi lo
cancello perché normalmente non si usa e
adesso diciamo che se io voglio abortire
il mio timer prima dei 3 secondi perché
magari è successo qualcosa e non voglio
più che questa funzione venga invocata
come faccio devo salvare il mio timeout
dentro una variabile quindi la chiamo
timer
ecco qui quindi io ho la mia stessa il
mio stesso timer salvato dentro a questa
funzione e adesso dentro qui possiamo
metterci un evento onclick
si usa la funzione cleartimeout e
come argomento si passa il nome della
variabile che ha il timer quindi timer
quindi se io adesso salvo fra tre
secondi quindi verrà visualizzato il mio
messaggio ok se io però ricarico la
pagina e clicca qui io ho abortito
l'operazione abortito il timer quindi
come vedete qui non succede più niente
adesso vi faccio vedere secondo tipo di
timer il secondo tipo di timer e si
chiama setinterval quindi io lo salvo
dentro una variabile intervallo
anche questo si potrebbe metterci
window davanti ma non serve quindi setinterval e in questo caso vado a
scriverci direttamente dentro la mia
funzione non serve non serve scriverla
fuori e poi passarla dentro si può
scrivere direttamente dentro posso
scrivere una funzione anonima come
questa function dentro ci metto console
log ciao mondo
e poi qui specifico il tempo
mettiamo due secondi ecco qui posso
anche invece di usare una funzione così
posso usare l'arrow function se vi
ricordate ve l'avevo già fatto a vedere
velocemente quando ho parlato delle
funzioni è un nuovo tipo di funzione
introdotto dall'ecma script 6
come scrive una arrow function non si
usa la keyword function ma si usa la fat
arrow come in questo caso le
due maniere di scrive le funzioni sono
identiche quindi non c'è nessuna
differenza in questo caso quindi voi
potete tranquillamente fare anche così
non cambia niente
andiamo a vedere come funziona allora in
teoria fra due secondi adesso io mi
trovo ciao mondo poi dopo tre secondi
ciao ciao
e poi siccome ho un intervallo ogni due
secondi questo intervallo come vedete mi
invoca la funzione che mi fa l'output di
ciao mondo anche in questo caso sì io
voglio come l'intervallo andrà avanti
all'infinito se io voglio abortire
l'intervallo devo
dichiarare il clearinterval come
mettiamo qui clearintervall e dentro ci
passò il nome intervallo eccolo qui come
vedete con l'evento onclick
io posso invocare più di una
funzione di fatto in questo caso sto
invocando cleartimeout e clearinterval
allora adesso io salvo io aborto non ho
abortito o di salvo
adesso ho abortito e come vedete non mi
viene nessun autobus perché io ho
abortito tutti e due gli intervalli vi
faccio vedere un caso in cui è utile
usare un timer
facciamo così allora diciamo io ho una
variabile y perché voglio creare un
movimento sull'asse delle y e gli
assegno 0 e poi creo la funzione function
muovi div ok
e qui dentro ci scrivo se y è minore di
500 esegue questa operazione questa
operazione document.getelementbyid e
questo caso voglio usare questo id qui
perché ho questo id pronto animazione e
poi ci metto style e poi ci metto il
left uguale y più pixel quindi io voglio
assegnare una differente posizione
sull'asse della ypsilon al mio div ogni
qual volta e questa funzione viene
invocata poi devo cambiare il valore di
y quindi faccia y più 5
se y ha già raggiunto i 500 resetto
l'intervallo quindi
clearinterval posso chiamarla sposta
sposta a div
ecco qui e questa è la mia funzione
apposta e adesso qui dichiaro la mia
variabile sposta div e ci assegno il setinterval
e dentro ci metto muovi e
facciamo ogni 50 millisecondi tanto per
avere un movimento abbastanza liscio qui
dentro adesso ci mette un po di style e
al mio div e quindi style
ecco qui allora intanto posso metterci
un width
metto quanto si può fare 150 pixel poi ci mette un height e ci metto 150
pixel anche qui poi ci metto un
background
red e poi ci metto un position relative
ok dovremmo esserci quindi adesso
io ho creato anzi vi faccio vedere il div
come sembrerà eccolo qui
questo è il mio div
adesso io vado ad allargare un po'
la mia immagine qui e adesso
praticamente io vado a invocare questa
funzione ogni 50 millisecondi
finché la mia la mia y da zero
arriverà a 500 pixel quindi saranno uno
spostamento verso destra del mio div
ecco qua
andiamo a salvare ho dimenticato di
scrivere qualcosa perché era muovi div
ho messo solo muovi e ricominciamo
ecco lui come vedete sto facendo un
animazione del mio div
allora diciamo che prima dell'avvento
dei css3 veniva molto usato questo
tecnica per fare animazioni sul web
adesso per per un discreto numero di
animazioni si possono usare direttamente
i css quindi non è più non serve più
usare javascript però sapete che questa
è una tecnica molto e che era molto
usata è quindi questa è una maniera per
usare i timer di javascript con questo è
tutto ci sentiamo la prossima ciao
degli dei timeout ovvero dei timer di
javascript javascript ha due tipi di timer
uno che esegue una funzione dopo un
determinato lasso di tempo e un altro
che dopo un determinato lasso
di tempo esegue una la stessa funzione a
intervalli regolari i timer sono
molto usati in javascript per eseguire
diverse operazioni farò anche vedere un
esempio intanto vi faccio vedere come si crea
un timer allora io scrivo una funzione e
la chiamo funzione saluta e dentro ci
metto un semplice console.log dove io
voglio visualizzare un messaggio con
scritto ciao
e poi io qui setto il mio timer allora
sarebbe window.settimeout
eccolo qui dentro ci passo come accetta
due argomenti come primo argomento ci
passò la mia funzione però senza le
parentesi tonde e come secondo argomento
ci devo specificare il tempo dopo il
quale io voglio che questa funzione
venga invocata e il tempo va specificato
in millesecondi quindi se io metto per
esempio mille vuol dire dopo un secondo
diciamo che io voglio che intervenga
dopo tre secondi e quindi metto 3000
andiamo a vedere l'output quindi adesso
fra tre secondi quindi verrà
visualizzato il mio saluto eccolo qui
come vedete dopo tre secondi è stato
invocato la mia funzione saluta allora
vi dico già che usare window
che qui non è obbligatorio quindi lo
cancello perché normalmente non si usa e
adesso diciamo che se io voglio abortire
il mio timer prima dei 3 secondi perché
magari è successo qualcosa e non voglio
più che questa funzione venga invocata
come faccio devo salvare il mio timeout
dentro una variabile quindi la chiamo
timer
ecco qui quindi io ho la mia stessa il
mio stesso timer salvato dentro a questa
funzione e adesso dentro qui possiamo
metterci un evento onclick
si usa la funzione cleartimeout e
come argomento si passa il nome della
variabile che ha il timer quindi timer
quindi se io adesso salvo fra tre
secondi quindi verrà visualizzato il mio
messaggio ok se io però ricarico la
pagina e clicca qui io ho abortito
l'operazione abortito il timer quindi
come vedete qui non succede più niente
adesso vi faccio vedere secondo tipo di
timer il secondo tipo di timer e si
chiama setinterval quindi io lo salvo
dentro una variabile intervallo
anche questo si potrebbe metterci
window davanti ma non serve quindi setinterval e in questo caso vado a
scriverci direttamente dentro la mia
funzione non serve non serve scriverla
fuori e poi passarla dentro si può
scrivere direttamente dentro posso
scrivere una funzione anonima come
questa function dentro ci metto console
log ciao mondo
e poi qui specifico il tempo
mettiamo due secondi ecco qui posso
anche invece di usare una funzione così
posso usare l'arrow function se vi
ricordate ve l'avevo già fatto a vedere
velocemente quando ho parlato delle
funzioni è un nuovo tipo di funzione
introdotto dall'ecma script 6
come scrive una arrow function non si
usa la keyword function ma si usa la fat
arrow come in questo caso le
due maniere di scrive le funzioni sono
identiche quindi non c'è nessuna
differenza in questo caso quindi voi
potete tranquillamente fare anche così
non cambia niente
andiamo a vedere come funziona allora in
teoria fra due secondi adesso io mi
trovo ciao mondo poi dopo tre secondi
ciao ciao
e poi siccome ho un intervallo ogni due
secondi questo intervallo come vedete mi
invoca la funzione che mi fa l'output di
ciao mondo anche in questo caso sì io
voglio come l'intervallo andrà avanti
all'infinito se io voglio abortire
l'intervallo devo
dichiarare il clearinterval come
mettiamo qui clearintervall e dentro ci
passò il nome intervallo eccolo qui come
vedete con l'evento onclick
io posso invocare più di una
funzione di fatto in questo caso sto
invocando cleartimeout e clearinterval
allora adesso io salvo io aborto non ho
abortito o di salvo
adesso ho abortito e come vedete non mi
viene nessun autobus perché io ho
abortito tutti e due gli intervalli vi
faccio vedere un caso in cui è utile
usare un timer
facciamo così allora diciamo io ho una
variabile y perché voglio creare un
movimento sull'asse delle y e gli
assegno 0 e poi creo la funzione function
muovi div ok
e qui dentro ci scrivo se y è minore di
500 esegue questa operazione questa
operazione document.getelementbyid e
questo caso voglio usare questo id qui
perché ho questo id pronto animazione e
poi ci metto style e poi ci metto il
left uguale y più pixel quindi io voglio
assegnare una differente posizione
sull'asse della ypsilon al mio div ogni
qual volta e questa funzione viene
invocata poi devo cambiare il valore di
y quindi faccia y più 5
se y ha già raggiunto i 500 resetto
l'intervallo quindi
clearinterval posso chiamarla sposta
sposta a div
ecco qui e questa è la mia funzione
apposta e adesso qui dichiaro la mia
variabile sposta div e ci assegno il setinterval
e dentro ci metto muovi e
facciamo ogni 50 millisecondi tanto per
avere un movimento abbastanza liscio qui
dentro adesso ci mette un po di style e
al mio div e quindi style
ecco qui allora intanto posso metterci
un width
metto quanto si può fare 150 pixel poi ci mette un height e ci metto 150
pixel anche qui poi ci metto un
background
red e poi ci metto un position relative
ok dovremmo esserci quindi adesso
io ho creato anzi vi faccio vedere il div
come sembrerà eccolo qui
questo è il mio div
adesso io vado ad allargare un po'
la mia immagine qui e adesso
praticamente io vado a invocare questa
funzione ogni 50 millisecondi
finché la mia la mia y da zero
arriverà a 500 pixel quindi saranno uno
spostamento verso destra del mio div
ecco qua
andiamo a salvare ho dimenticato di
scrivere qualcosa perché era muovi div
ho messo solo muovi e ricominciamo
ecco lui come vedete sto facendo un
animazione del mio div
allora diciamo che prima dell'avvento
dei css3 veniva molto usato questo
tecnica per fare animazioni sul web
adesso per per un discreto numero di
animazioni si possono usare direttamente
i css quindi non è più non serve più
usare javascript però sapete che questa
è una tecnica molto e che era molto
usata è quindi questa è una maniera per
usare i timer di javascript con questo è
tutto ci sentiamo la prossima ciao
Link correlati:
Link per il video che parla di parametri e callback
File del video:
