Javascript Settimeout

| | | | | |

setTimeout() e setInterval() sono eventi di temporizzazione JavaScript. Il metodo JavaScript setTimeout() esegue una funzione dopo un periodo di millisecondi. JavaScript setInterval() esegue una funzione continuamente dopo che è trascorso un certo periodo di millisecondi.

JavaScript viene eseguito riga per riga. Non appena una riga è stata eseguita, inizia la riga successiva. Per la maggior parte dei siti Web, questa struttura ha senso: è necessario che il codice venga eseguito in un ordine. E se volessi introdurre un’interruzione tra le operazioni?

Ecco dove i metodi setTimeout e setInterval tornano utili. setTimeout chiama una funzione dopo un ritardo specificato. setInterval chiama una funzione continuamente con un ritardo specificato.

In questa guida, parleremo di cosa setTimeout e setInterval< /em> sono. Mostreremo come funzionano facendo riferimento ad alcuni esempi in modo che tu possa iniziare a utilizzare questi metodi. Cominciamo!

Che cos’è JavaScript setTimeout?

JavaScript setTimeout() chiama un metodo dopo che è trascorso un certo periodo di millisecondi. Il metodo viene chiamato una sola volta. Il metodo setTimeout() ti consente di introdurre ritardi nel tuo codice.

Diamo un’occhiata alla sintassi di questo metodo:

I due parametri accettati da setTimeout sono:

  • funzione: la funzione che vuoi eseguire dopo che è trascorso un periodo di tempo.
  • time: la quantità di tempo che il tuo programma deve attendere prima di eseguire una funzione .

Avvia un timer JavaScript setTimeout

Creiamo un timer che stampi "Karma di carriera!" alla console utilizzando una funzione freccia:

Questo timer ha due argomenti. Il primo argomento è la funzione JavaScript che vogliamo eseguire all’interno del nostro oggetto finestra. Il secondo argomento è il periodo di tempo in millisecondi che vogliamo trascorrere prima che il codice all’interno della nostra funzione venga eseguito.

Dopo aver atteso due secondi, il nostro codice stampa "Carriera Karma!" alla console JavaScript.

La funzione che vuoi chiamare non deve essere definita all’interno di setTimeout funzione. Possiamo rifattorizzare il nostro codice per renderlo più facile da leggere:

La funzione che in precedenza era un argomento è ora nella propria funzione chiamato printCareerKarma. Facciamo riferimento a quella funzione all’interno del metodo setTimeout. Questo codice è più facile da leggere rispetto al nostro esempio originale.

Come annullare un timer setTimeout

Puoi annullare un timer usando il metodo clearTimeout(). Questo fermerà l’esecuzione di un timer e il codice all’interno un timer non verrà eseguito. Considera il seguente codice:

Questo codice non stampa "Carriera Karma!" sulla console. Questo perché cancelliamo il nostro timer usando clearTimeout prima che il timer setTimer abbia la possibilità di essere eseguito.

Che cos’è JavaScript setInterval?

Il metodo JavaScript setInterval() chiama una funzione ripetutamente. Viene impostato un ritardo specificato tra ogni chiamata di una funzione.

setIn terval() utilizza una sintassi simile a setTimeout():

Devi specificare due parametri per utilizzare setInterval:

  • function: la funzione che verrà eseguita.
  • time: il tempo tra ogni chiamata della funzione che hai specificato.

Avvia un timer JavaScript setInterval

Mentre setTimeout esegue una funzione solo una volta, setInterval continuerà a eseguire nuovamente una funzione. Utilizza la stessa sintassi del metodo setTimeout.

Creiamo una funzione che stampi il contenuto di un array di caffè sulla console:

Questo codice esegue ripetutamente la funzione iterateOverArray. C’è un secondo (1000 millisecondi) di ritardo tra ogni chiamata di questa funzione.

Eseguiamo il nostro codice:

Il problema con questo codice è che continua a funzionare anche dopo aver ripetuto ogni elemento della nostra lista . Quando tutti gli elementi del nostro elenco sono stati stampati sulla console, "undefined" i valori vengono stampati indefinitamente.

La funzione setInterval continuerà a essere eseguita perché si ripete finché non viene indicato di fermarsi. Risolviamo questo problema.

Come annullare un timer setInterval

Il metodo clearInterval interrompe l’esecuzione di un metodo setInterval ulteriormente.

Annulla il nostro timer una volta che tutti i caffè del menu sono stati stampati sulla console. Per iniziare, calcoleremo quanti articoli ci sono nella nostra lista di caffè. Questo ci permetterà di identificare quando dovremmo annullare il nostro timer.

Successivamente, aggiungeremo una funzione alla fine del nostro codice. Questa funzione interrompe il nostro metodo setInterval dopo che tutti i nostri caffè sono stati stampati sulla console:

Successivamente, aggiungeremo una funzione alla fine del nostro codice. Questa funzione interrompe il nostro metodo setInterval dopo che tutti i nostri caffè sono stati stampati sulla console:

Abbiamo assegnato il nostro metodo setInterval() alla sua variabile chiamato printCoffees. Abbiamo quindi dichiarato un metodo setTimeout() che annulla l’intervallo di tempo di printCoffees. Questo metodo verrà eseguito dopo che ogni caffè nella nostra lista è stato ripetuto.

Calcoliamo quanti secondi deve attendere il metodo setTimeout() moltiplicando il numero di caffè da stampare per 1001. Nella nostra lista sono memorizzati quattro caffè. Quattro moltiplicato per 1000 fa 4000, che sono quattro secondi.

Abbiamo scelto il numero 1001 in modo che il nostro timer si fermi dopo che l’ultimo elemento dell’array è stato stampato sulla console. Se scegliamo il numero 4000, il nostro metodo printCoffees si interromperà prima di stampare l’ultimo elemento nel nostro "caffè" array alla console.

Eseguiamo il nostro codice:

Il nostro codice si interrompe dopo che tutti gli elementi della nostra lista sono stati stampati sulla console. Non continua più a essere eseguito indefinitamente. Questo perché abbiamo utilizzato il metodo clearInterval() per interrompere il metodo setInterval().

setInterval: un esempio visivo

Utilizziamo un po’ di HTML per mostrare come funziona la funzione setInterval. Creeremo un semplice sito Web che mostra la nostra lista di caffè. Questi caffè verranno aggiunti uno ad uno al sito. Inizieremo creando un semplice front-end per il progetto in un file chiamato index.html:

La nostra interfaccia ha questo aspetto:

6okXMdjRqVaKAyir5bEYOj8C94vmv NLTTYy4tw3 JLK O2H3r QXrM Blze886bBFFOzVth2mVnmq9E9IKo AmRYMoPdoGhToy4K0rFANOFnqAHmeyn74JellbuBam1m910vvtc

Finora non c’è molto da fare. Questo perché abbiamo bisogno di scrivere del JavaScript per far apparire i nostri caffè.

Siamo sulla pagina web.

Inizieremo il nostro JavaScript selezionando la nostra lista.Apri un file chiamato scripts.js e incolla questo codice:

Questo codice seleziona il nostro elemento della lista. Puoi saperne di più su getElementById nel nostro tutorial su < a href="/javascript-getelementbyidv/">JavaScript getElementById. Quindi, utilizzeremo il nostro codice di prima, con alcune modifiche, per visualizzare i caffè sulla pagina web:

Nella funzione iterateOverArray, abbiamo aggiunto del nuovo codice . Abbiamo prima usato createElement() per creare un nuovo elemento li. Abbiamo quindi impostato il contenuto di quell’elemento li in modo che sia uguale al nome di un caffè nella nostra lista.

Il nostro codice aggiunge l’elemento li all’elemento ul nella nostra lista. Questo processo si ripete finché ogni elemento della nostra lista di caffè non è stato aggiunto alla pagina web, come nel nostro ultimo esempio.

Eseguiamo il nostro codice e vediamo cosa succede. Dopo quattro secondi, i nostri restituisce il codice: BKdNM1booSj51VOG3Edr4fT1Z53SrHX6tT7RcsPA7tSJ5bGi1IPvOqHEDNNThuDhexK3vOSZ9 JdXWlcfQ0WXyaX2y4lCBr957jjAEkenvoWF27UEWPNpgpExDnX6PwV0wvAO 5u

C’è un secondo intervallo tra ogni elemento dell’elenco che viene aggiunto alla pagina web.

Conclusione (e sfida)

setTimeout e setInterval sono eventi di temporizzazione JavaScript. Il metodo setTimeout esegue una funzione dopo un ritardo. setInterval chiama una funzione ripetutamente con un ritardo tra ogni chiamata.

Stai cercando di migliorare le tue abilità con questi metodi? Prova a creare un’interfaccia visiva usando HTML e JavaScript per un gioco di memoria.

Il gioco dovrebbe mostrare una serie di cinque parole che l’utente deve ricordare. Dopo che le parole sono state visualizzate, all’utente dovrebbe essere chiesto quali ricorda. Se stai cercando ulteriore aiuto per imparare JavaScript, leggi la nostra guida su i migliori tutorial per principianti di JavaScript.

Javascript Settimeout __del__: Questions

Javascript Settimeout JavaScript: Questions

Shop

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Best laptop for Zoom

$499

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method