WebSQL HTML5: ¿cómo saber cuándo finaliza una transacción de db?

Question

Tengo el siguiente código que obtiene un conjunto de registros json e inserta algunos datos en tres tablas diferentes en el almacenamiento Web Sql del cliente.

¿Cómo puedo interceptar el final de la función databaseSync()? Lo que quiero hacer es mostrar una alerta o mejor un gif ajax spinner para informar al usuario cuando se complete la sincronización.

Muchas gracias por su ayuda, ciao!

function databaseSync() { 

     // table one 
     $.getJSON("http://192.168.1.40:8888/iOS/mobilesrv/index.php?ACT=one", function(json) { 
      $.each(json.results, function(i, res) { 
       db.transaction(function(tx) { 
        tx.executeSql("INSERT INTO table1 (A, B, C, D) VALUES (?,?,?,?) ", [res.A, res.B, res.C, res.D], onSuccess, onError); 
       }); 
      }); 
     }); 

     // table two 
     $.getJSON("http://192.168.1.40:8888/iOS/mobilesrv/index.php?ACT=two", function(json) { 
      $.each(json.results, function(i, res) { 
       db.transaction(function(tx) { 
        tx.executeSql("INSERT INTO table1 (A, B, C, D) VALUES (?,?,?,?) ", [res.A, res.B, res.C, res.D], onSuccess, onError); 
       }); 
      }); 
     }); 

     // table three 
     $.getJSON("http://192.168.1.40:8888/iOS/mobilesrv/index.php?ACT=three", function(json) { 
      $.each(json.results, function(i, res) { 
       db.transaction(function(tx) { 
        tx.executeSql("INSERT INTO table1 (A, B, C, D) VALUES (?,?,?,?) ", [res.A, res.B, res.C, res.D], onSuccess, onError); 
       }); 
      }); 
     }); 


    } 

Answer 1

Ok, esta es mi quinta revisión, pero me gusta esta pregunta y yo siempre vuelven a aparecer con mejores ideas. Este usa jquery deferred objects y creo que finalmente cubre todos los casos y funciona como debería.

function tableInsert(url) { 
    var dfd = $.Deferred(); 
    var arr = []; 
    $.getJSON(url, function(json) { 
     $.each(json.results, function(i, res) { 
      var dfd = $.Deferred(); 
      arr.push(dfd.promise()); 
      db.transaction(function(tx) { 
       tx.executeSql(
        "INSERT INTO table1 (A, B, C, D) VALUES (?,?,?,?) ", 
        [res.A, res.B, res.C, res.D], 
        function(){ 
         onSuccess(dfd.resolve); 
        }, 
        function(){ 
         onError(dfd.resolve); 
        } 
       ); 
      }); 
     }); 
     $.when.apply(this, arr).then(dfd.resolve); 
    }); 
    return dfd.promise(); 
} 

function databaseSync() { 

    $.when(tableInsert("http://192.168.1.40:8888/iOS/mobilesrv/index.php?ACT=one"), 
      tableInsert("http://192.168.1.40:8888/iOS/mobilesrv/index.php?ACT=two"), 
      tableInsert("http://192.168.1.40:8888/iOS/mobilesrv/index.php?ACT=three")) 
     .then(function(){ 
      console.log('All processing complete'); 
     }); 
} 

para que esto funcione tendrá que cambiar onSuccess y onError para ejecutar la función de determinación como una función de devolución de llamada después de hacer cualquier otra cosa es lo que hacen y luego esto debería funcionar para usted. Espero que encuentres esto útil.

Answer 2

Alternativamente, puede utilizar una transacción para la inserción masiva y la función de devolución de llamada uso para ser notificado acerca de la finalización de la transacción

function doSync(){ 
    databaseSync(function(){ 
    console.log('database sync is completed') 
    }); 
} 

function databaseSync(onTrxSuccess) { 
    db.transaction(function(tx) { 
    // table one 
    $.getJSON("http://192.168.1.40:8888/iOS/mobilesrv/index.php?ACT=one", function(json) { 
     $.each(json.results, function(i, res) {     
       tx.executeSql("INSERT INTO table1 (A, B, C, D) VALUES (?,?,?,?) ", [res.A, res.B, res.C, res.D], onSuccess, onError); 
      }); 
     }); 


    // table two 
    $.getJSON("http://192.168.1.40:8888/iOS/mobilesrv/index.php?ACT=two", function(json) { 
     $.each(json.results, function(i, res) { 
       tx.executeSql("INSERT INTO table1 (A, B, C, D) VALUES (?,?,?,?) ", [res.A, res.B, res.C, res.D], onSuccess, onError); 
      }); 
    }); 

    // table three 
    $.getJSON("http://192.168.1.40:8888/iOS/mobilesrv/index.php?ACT=three", function(json) { 
     $.each(json.results, function(i, res) { 
       tx.executeSql("INSERT INTO table1 (A, B, C, D) VALUES (?,?,?,?) ", [res.A, res.B, res.C, res.D], onSuccess, onError); 
      }); 
     }); 
    }, null, onTrxSuccess); 


}