Attendi X secondi in JavaScript

1. Usa setTimeout() per attendere X secondi in JavaScript
2. Usa promesse e async/await per attendere X secondi in JavaScript
3. Usa il cicli for per implementare la funzione ritardo sincrono in JavaScript

Questo tutorial spiegherà come possiamo aspettare x secondi prima di continuare l’esecuzione in JavaScript. Implementeremo una funzione delay(seconds) che bloccherà il thread per x secondi. Spiegheremo anche più tecniche di implementazione per questo ritardo.

Quando parliamo di implementare una funzione delay, il metodo più utilizzato è l’asincrono setTimeout().

Usa setTimeout() per attendere X secondi in JavaScript

Il metodo asincrono setTimeout() è una delle funzioni di ordine superiore che accetta una funzione di callback come argomento ed esegue quella funzione dopo che è trascorso il tempo di input. Il tempo indicato nel parametro è nell’unità di ms.

console.log('I am the first log');

setTimeout(function() {
  console.log('I am the third log after 5 seconds');
}, 5000);

console.log('I am the second log');

Produzione:

I am the first log
I am the second log
I am the third log after 5 seconds

Usa promesse e async/await per attendere X secondi in JavaScript

Un metodo per implementare la funzione di ritardo nel contesto asincrono consiste nel combinare il concetto async/await e il concetto di promises. Possiamo creare una funzione delay che restituisca una nuova promises all’interno, che chiameremo il metodo setTimeout() con il nostro tempo di attesa desiderato. Dopodiché, possiamo chiamare quella funzione delay all’interno di qualsiasi contesto asincrono a nostro piacimento.

function delay(n) {
  return new Promise(function(resolve) {
    setTimeout(resolve, n * 1000);
  });
}

async function myAsyncFunction() {
  // Do what you want here
  console.log('Before the delay')

      await delay(5);

  console.log('After the delay')
  // Do what you want here too
}

myAsyncFunction();

Produzione:

Before the delay
After the delay

La funzione di ritardo può anche essere ottimizzata utilizzando la sintassi della freccia in ECMAScript 6 come il seguente esempio:

const delay = (n) => new Promise(r => setTimeout(r, n * 1000));

Usa il cicli for per implementare la funzione ritardo sincrono in JavaScript

Supponiamo di non avere alcun contesto asincrono per utilizzare la funzione delay() di cui sopra o di non voler usare la funzione setTimeout(). In tal caso, possiamo implementare una funzione di ritardo sincrono con un normale cicli for e la classe Date() per calcolare il tempo.

L’implementazione di questa funzione è piuttosto semplice. Si tratta di mantenere la CPU occupata per la quantità di tempo desiderata. Questo è calcolando il tempo trascorso e confrontandolo con il tempo di attesa in modo da poter continuare l’esecuzione dopo di esso.

function syncDelay(milliseconds) {
  var start = new Date().getTime();
  var end = 0;
  while ((end - start) < milliseconds) {
    end = new Date().getTime();
  }
}

console.log('Before the delay')
syncDelay(5000);
console.log('After the delay')

Produzione:

Before the delay
After the delay