Demande GET synchrone avec Javascript/jQuery

Question

J'ai une fonction qui fait une requête GET ajax et qui, en fonction de la valeur renvoyée, définit une variable JS globale. J'utilise cette variable (isCalculateTax dans le code ci-dessous) pour un traitement ultérieur :

var isCalculateTax;

function setCalculateTaxValue(taxStatementId) {
 $.get('/taxstatements/calculatetax/' + taxStatementId, function (data) {
  isCalculateTax = data.isCalculateTax;
 });
}

$(document).ready(function () {
 // initially check the tax statements dropdown to see which one is selected
 // and set the isCalculateTax to the right value
 var taxStatementId = $('#taxStatements').val();
 setCalculateTaxValue(taxStatementId);
 enumerateDocumentItems(isCalculateTax);
});

Mon problème est que lorsque enumerateDocumentItems() est appelé et exécuté, isCalculateTax n'est pas encore mis à jour à partir de la requête AJAX GET, et je reçois donc des résultats imprévisibles.

Comment puis-je attendre le temps nécessaire avant d'exécuter enumerateDocumentItems() pour que isCalculateTax soit correct ?

Answer 1

Il y a deux façons de procéder. Premièrement, vous pouvez modifier setCalculateTaxValue (et probablement le renommer) de façon à ce qu'il accepte un callback qui sera exécuté lorsque la valeur sera récupérée. Vous passeriez alors enumerateDocumentItems en tant que rappel. Alternativement, et ceci va vraiment à l'encontre du concept d'asynchronicité, vous pouvez le changer pour utiliser $.ajax et définir le aSync à false. Je recommande la première option.

var isCalculateTax; // no longer needed?

function updateTaxValue(taxStatementId,callback) { 
 $.get('/taxstatements/calculatetax/' + taxStatementId, function (data) {
  isCalculateTax = data.isCalculateTax;
  if (callback) {
      callback.call( taxStatementId, data.isCalculateTax ); 
  }
 }); 
} 

$(document).ready(function () { 
 // initially check the tax statements dropdown to see which one is selected 
 // and set the isCalculateTax to the right value 
 var taxStatementId = $('#taxStatements').val(); 
 updateTaxValue(taxStatementId,enumerateDocumentItems); 
});

L'utilisation de la fonction de rappel est un peu plus souple que la simple référence directe à la fonction de rappel. Cela vous permettra de réutiliser le code de mise à jour à plusieurs fins si nécessaire.

Answer 2

Il suffit d'appeler enumerateDocumentItems() à l'intérieur de la fonction de rappel $.get, juste après la définition de isCalculateTax.

Assurez-vous simplement que l'interface utilisateur a un sens entre les deux.