La meilleure façon de structurer Javascript Si les déclarations d'être synchrone dans une fonction

Pas toutes les lignes de code s'exécute de façon asynchrone en Javascript. Cela dépend de votre code. Par exemple:

var someFunc = function () {
  if (something) {
    console.log('something');
  }
  if (somethingElse) {
    console.log('something else');
  }
};

Toujours écrire la sortie suivante:

something
something else

Toutefois, si au lieu d'imprimer les valeurs que vous appelez une fonction qui sera exécutée plus tard (par exemple, une requête Ajax ou un setTimeout rappel), il n'y a aucune garantie que votre code est exécuté dans l'ordre exact. Ce comportement dépend de la fonction que vous appelez. Par exemple, le JQuery $.get() fonction est asynchrone (ce qui signifie qu'il va appeler votre fonction à une date ultérieure qui n'est pas sous votre contrôle) comme ceci:

var someFunc = function () {
  if (something) {
    $.get('some-file.txt').done(function (result) {
      console.log(result);
    });
  }
  if (somethingElse) {
    $.get('some-other-file.txt').done(function (result) {
      console.log(result);
    });
  }
};

Le résultat peut être le contenu de 'some-file.txt" et "some-other-file.txt" dans tous les autres.

En règle générale, chaque fois que vous passez d'une fonction à une autre fonction (rappels), vous pourriez être en utilisant la asynchrone fonction de Javascript.

---

Imbriquée rappels

Une façon de résoudre ce problème est l'appel de la deuxième appel asynchrone dans la première fonction:

var someFunc = function () {
  if (something) {
    $.get('some-file.txt').done(function (result1) {
      console.log(result1);
      if (somethingElse) {
        $.get('some-other-file.txt').done(function (result2) {
          console.log(result2);
        });
      }
    });
  }
};

Mais comme vous l'avez deviné, ce code sera difficile à lire.

---

Promesses à la rescousse

Avec Promesses vous pouvez avoir un code plus facile à lire.

Allons écrire au-dessus de laide code avec des promesses:

var someFunc = function () {
  if (something) {
    $.get('some-file.txt').then(function (result1) {
      console.log(result1);
      if (somethingElse) {
        return $.get('some-other-file.txt');
      }
    }).then(function (result2) {
        console.log(result2);
    });
};

En général, promet de rendre le code plus lisible et éviter de trop imbriqués pour les rappels. Vous pouvez de la chaîne d' promesses et il va lire comme code synchrone mais en fait il s'exécute de façon asynchrone.

Voir ces questions pour obtenir plus d'informations:

• Comment la chaîne de trois appels asynchrones à l'aide de jQuery promesses?
• La chaîne de Jquery Promesses

Quelle est la capture avec des promesses?

1. Ils ne sont pas pris en charge dans les anciens navigateurs (mais vous pouvez en ajouter avec une 3ème partie de la bibliothèque comme ES6 Promesse Polyfill.
2. Avant que les promesses ont été officiellement normalisé toutes les bibliothèques avaient leur propre mise en œuvre, qui sont légèrement incompatible (jQuery, Angulaire, Braise)
3. Ils sont un nouveau concept pour apprendre, alors la courbe d'apprentissage sera un peu raide pour les nouveaux arrivants.

OriginalL'auteur AlexStack