HTML5 Exécution séquentielle

Question

J'ai créé un stockage Web pour les détails du produit (ID de produit, nom, quantité à la main) et ai des enregistrements de remplissage à partir du serveur. Je dois valider si la quantité requise est disponible pour accepter la commande.

Le formulaire produit comporte des cases à cocher (avec name = "product") pour chaque produit disponible dans le stockage Web et un champ de saisie de texte correspondant pour accepter la quantité requise.

La méthode de validation est définie comme suit.

function productValidation(){ 

    for(i=0;i<document.Products.product.length;i++){ 

     // checking whether the product has been checked/choosen 

     if (document.Products.product[i].checked==true){ 
     var productId = document.Products.product[i].value; 
      var qty = document.Products.p[i].value; 
      var db = systemDB; 

      // validating the available quantity 

      db.transaction(
       function(transaction){ 
        transaction.executeSql('select * from product where productId=?;', 
        [productId], 
        function(transaction, results){ 
         for (var j=0; j<results.rows.length; j++) { 
          var row = results.rows.item(j); 
          if (qty>row['qoh']){ 
           alert(
            row['productname'] 
            + ' is out of stock. We can serve you only ' 
            + row['qoh'] + ' quantities currently!');          
           document.Products.product[i].checked = false;      
           document.Products.p[i].value = 0; 
          } 
         } 
        }); 
       } 
      ); 
     } 
    } 
    return false; 
} 

Lorsque ce code est exécuté, en raison de la nature asynchrone du db.transaction, la boucle extérieure est exécutée et se validation se passe que pour le dernier produit choisie.

Aidez-moi à résoudre ce problème. Je veux que l'exécution se produise séquentiellement.

Yuvi

Answer 1

Essayez enchaînant les appels ensemble dans la fonction de rappel pour db.transaction:

function productValidation(){ 

    checkProductsSequential(document.Products.product, 0); 
    return false; 
} 

function checkProductsSequential(products, i) 
{ 
    if (i < products.length) 
    { 
     // checking whether the product has been checked/choosen 
     if (document.Products.product[i].checked==true){ 
      var productId = document.Products.product[i].value; 
      var qty = document.Products.p[i].value; 
      var db = systemDB; 

      // validating the available quantity 

      db.transaction(
       function(transaction){ 
        transaction.executeSql('select * from product where productId=?;', 
        [productId], 
        function(transaction, results){ 
         for (var j=0; j<results.rows.length; j++) { 
          var row = results.rows.item(j); 
          if (qty>row['qoh']){ 
           alert(
            row['productname'] 
            + ' is out of stock. We can serve you only ' 
            + row['qoh'] + ' quantities currently!');          
           document.Products.product[i].checked = false;      
           document.Products.p[i].value = 0; 
          } 
         } 
         checkProductsSequential(products, i + 1) 
        }); 
       } 
      ); 
     } 
     else 
     { 
      checkProductsSequential(products, i + 1) 
     } 
    } 
}