👻
Docs & code snippets
  • Page 1
  • GIT
    • Commandes principales
  • SCSS
    • Mixins, extensions, functions
    • Boucles
    • Animations CSS
  • JAVASCRIPT
    • Objets
    • Class
    • If / else
    • Switch
    • For
    • While
    • try / catch (tester une erreur)
    • Functions
    • Méthodes d'instances / statique
    • DOM manipulation
    • Events
    • Fetch
    • Asynchrone & event loop
Powered by GitBook
On this page
  • setTimeout();
  • Les autres méthodes
  • Callbacks
  • Async / Await avec Promise
  1. JAVASCRIPT

Asynchrone & event loop

PreviousFetch

Last updated 2 years ago

setTimeout();

setTimeout(function() {
    console.log("I'm here!")
}, 5000);

console.log("Where are you?");

La fonction setTimeout () nous retourne une valeur permettant d'identifier le code asynchrone que l'on veut exécuter. Il est possible de passer cet identifiant en paramètre à la fonction clearTimeout , si vous souhaitez annuler l'exécution asynchrone de la fonction avant qu'elle ne soit exécutée.

Les autres méthodes

Il existe d'autres méthodes un peu moins répandues, voire très peu utilisées :

  • setInterval () : elle fonctionne exactement comme setTimeout , à ceci près qu'elle exécute la fonction passée en paramètre en boucle à une fréquence déterminée par le temps en millisecondes passé en second paramètre. Il suffira de passer la valeur de retour de setInterval à clearInterval pour stopper l'exécution en boucle de la fonction ;

  • setImmediate (). Cette fonction prend en seul paramètre la fonction à exécuter de façon synchrone. La fonction en question sera placée dans la file d'attente de l'event loop, mais va passer devant toutes les autres fonctions, sauf certaines spécifiques au Javascript : les événements (les mêmes qu'on a vus au premier chapitre, et qui sont donc exécutés de façon asynchrone 😉), le rendu, et l'I/O. Il existe aussi nextTick , qui permet, là, de court-circuiter tout le monde. À utiliser avec précaution, donc...

Callbacks

Trouver un bon exemple

Async / Await avec Promise

async function getNumber1() {
  return 10;
}

async function getNumber2() {
  return 4;
}

async function compute() {
  const value1 = await getNumber1();
  const value2 = await getNumber2();
  return value1 + value2;
}

const result = document.getElementById('result');

compute()
  .then(function(res) {
    result.innerText = res + '';
});

Enchaîner plusieurs Promises :

// la première Promise contient 2 requêtes GET
Promise.all([get(url1), get(url2)])
    .then(function(results) {
        // une fois résolue, la seconde Promise ajoute 1 requête POST
        // all() réunit tout dans un tableau
        return Promise.all([results, post(url3)]);
    })
    .then(function(allResults) {
        // We are done here !
    });
documentation à retrouver ici
documentation à retrouver ici
documentation à retrouver ici