very slow query using web sql and javascript
Question
Hi i'm working on phonegap app, and im having problem with web sql query. I have a list.html when i draw a table with images that recived from a sql query in a BD.js but i must use setTimeOut on list.html for succes the query, if i dont do it the result if empty.
This is the list.html, on line 38 is the function:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="../css/lista.css">
<script src="../libs/jquery.mobile/jquery-1.7.2.min"></script>
<script src="../libs/jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script src="../libs/jquery-2.1.1.min.js"></script>
<script src="../libs/jquery.blockUI.js"></script>
<script type="text/javascript" charset="utf-8" src="../libs/cordova-1.9.0.js"></script>
<script src="../libs/SQLitePlugin.js"></script>
<script src="../libs/qunit-1.5.0.js"></script>
<script type="text/javascript" src="../js/BDTablaPictogramas.js"></script>
<script src="../libs/lawnchair-0.6.1.js"></script>
<script src="../libs/webkit-sqlite.js"></script>
<script type="text/javascript">
var btnMenuOpcionesPulsado = false,
dialogoAcercaDe = false;
var posicionCategoria = 0, numElemCategoria = 0;
var idioma = "", fraseBuscar = "";
var listaPictogramas = [];
$(function(){
$("#dialogoAcercaDe").hide();
$("#menuOpciones").hide();
var todoURL = leerGET();
posicionCategoria = todoURL['pos'];
numElemCategoria = todoURL['numElemCategoria'];
idioma = todoURL['idioma'];
fraseBuscar = todoURL['fraseBuscar'];
$.blockUI({ message: '<h1>Cargando...</h1>' });
var msToWait2 = 11000;
setTimeout(function() {
$.unblockUI();
document.addEventListener("deviceready", cargarImgsCategorias, false);
}, msToWait2);
});
function leerGET(){
var cadGET = location.search.substr(1, location.search.length);
var arrGET = cadGET.split("&");
var asocGET = new Array();
var variable = "";
var valor = "";
for(i=0;i<arrGET.length;i++){
var aux = arrGET[i].split("=");
variable = aux[0];
valor = aux[1];
asocGET[variable] = valor;
}
return asocGET;
}
function cargarImgsCategorias(){
if(posicionCategoria == 0) loadImgBuscarUnidimensional(fraseBuscar, idioma);
else if(posicionCategoria == 1) loadImgFavoritoUnidimensional(idioma);
else if(posicionCategoria == 2) loadImgUnidimensional("alimentos");
else if(posicionCategoria == 3) loadImgUnidimensional("animales");
else if(posicionCategoria == 4) loadImgUnidimensional("animales-insectos");
else if(posicionCategoria == 5) loadImgUnidimensional("banno");
else if(posicionCategoria == 6) loadImgUnidimensional("cocina");
else if(posicionCategoria == 7) loadImgUnidimensional("dormitorio");
else if(posicionCategoria == 8) loadImgUnidimensional("miscel_a_nea");
else if(posicionCategoria == 9) loadImgUnidimensional("ropa");
else if(posicionCategoria == 10) loadImgUnidimensional("sal_o_n");
else if(posicionCategoria == 11) loadImgUnidimensional("transportes");
else if(posicionCategoria == 12) loadImgUnidimensional("varios-hogar");
var msToWait = 250;
setTimeout(function() {
listaPictogramas = getImgsCategoria();
crearCuadricula();
hacerClic();
cargarIdiomaBarraAtras();
cargarIdiomaAcercaDe();
cargarIdiomaMenuOpciones();
}, msToWait);
}
function crearCuadricula(){
for(var i=0;i<numElemCategoria;i++){
if(i%3 == 0)
$("table").append('<tr></tr>');
$("table tr:last-child").append("<td class='focus'><img src='"+listaPictogramas[i]+"' /></td>");
}
}
</script>
</head>
<body>
<div id="dialogoAcercaDe">
<div id="contenido"></div>
</div>
<div id="cajaAtras">
<div id="subcajaAtras1"><img id="btnVolverAtras" src="../images/btn_atras2.png" height="32" width="32" /></div>
<!-- <div id="subcajaAtras2"><img id="btnMenu" src="../images/menu3.png" height="69" width="128" /></div> -->
<div id="subcajaAtras2"><img id="btnMenu" src="../images/rueda.png" /></div>
</div>
<div id="menuOpciones">
<ul>
<li id="opcion1IdiomaESP">Idioma - ESP</li>
<li id="opcion2IdiomaENG">Idioma - ENG</li>
<li id="opcion3Acercade">Acerca de...</li>
</ul>
</div>
<div id="cuadricula">
<table width="200" border="2" cellpadding="0" cellspacing="0" bordercolor="#000000">
<!-- <tr>
<td><img src="../assets/imagenes/alimentos/aced_i_as.gif" /></td>
<td><img src="../assets/imagenes/alimentos/aceitera.gif" /></td>
<td><img src="../assets/imagenes/alimentos/aceitunas.gif" /></td>
</tr>
<tr>
<td><img src="../assets/imagenes/alimentos/acelga.gif" /></td>
<td><img src="../assets/imagenes/alimentos/ajo.gif" /></td>
<td><img src="../assets/imagenes/alimentos/albondigas.gif" /></td>
</tr>
<tr>
<td><img src="../assets/imagenes/alimentos/alcachofa.gif" /></td>
<td><img src="../assets/imagenes/alimentos/almejas.gif" /></td>
<td><img src="../assets/imagenes/alimentos/almendra.gif" /></td>
</tr>
<tr>
<td><img src="../assets/imagenes/alimentos/almuerzo.gif" /></td>
<td><img src="../assets/imagenes/alimentos/alubias.gif" /></td>
<td><img src="../assets/imagenes/alimentos/anacardos.gif" /></td>
</tr> -->
</table>
</div>
</body>
</html>
And this is BD.JS code, the fuction is on line 42
document.addEventListener("deviceready", initDB, false);
var db = "";
function initDB() {
try {
if(!window.openDatabase)
alert('not supported');
else{
var shortName = 'Pictogramas';
var version = '1.0';
var displayName = 'PhoneGap Pictogramas Database';
var maxSize = 9999999999; // en bytes
db = window.openDatabase(shortName, version, displayName, maxSize);
db.transaction(populateDB, errorCB, successCB);
}
}catch(e){
if(e == INVALID_STATE_ERR)
alert("Invalid database version.");
else
alert("Unknown error "+e+".");
return;
}
}
function populateDB(tx) {
var BDCreada = localStorage.getItem('BDTablaPictogramasCreada') || '<empty>';
if(BDCreada != "SI"){
//se cren las tablas y las inserciones
BDCreada = "SI";
localStorage.setItem("BDTablaPictogramasCreada", BDCreada);
alert("AVISO BD FINAL");
function errorCB(err) {
alert("Error processing SQL: "+err.code);
}
function successCB() {
console.log("Success creating Database 1.0");
console.log("Rows Affected = " + results.rowAffected);
alert("Creada con exito.");
}
//Función que no se ejecuta sino se espera 11 segundos.
function loadImgUnidimensional(categoria){
db.transaction
(
function (tx){
//alert("Posición:"+categoria);
tx.executeSql
(
"SELECT RutaImagen FROM Pictogramas WHERE Categoria = '"+categoria+"'",
[],
function(tx,results){
var len = results.rows.length;
for(var i=0;i<len;i++)
imgsCategoria.push(results.rows.item(i).RutaImagen);
}, errorCB
);
},errorCB,successCB
);
return imgsCategoria;
}
2 answers
solution1
0 2015-03-26 09:19:39
in your callback
function function(tx,results){
var len = results.rows.length;
for(var i=0;i<len;i++)
imgsCategoria.push(results.rows.item(i).RutaImagen);
}
call a function of your own that resumes your program flow.
How it should be:
- Function one -> does its thing, executes query
- Function two -> handles query output(the above function in this case). This function calls function three after its done.
- Function three -> resumes program flow
solution2
0 2015-03-26 12:37:21
Finally i solve with a while bucle :
function cargarImgsCategorias(){
if(posicionCategoria == 0) loadImgBuscarUnidimensional(fraseBuscar, idioma);
else if(posicionCategoria == 1) loadImgFavoritoUnidimensional(idioma);
else if(posicionCategoria == 2) loadImgUnidimensional("alimentos");
else if(posicionCategoria == 3) loadImgUnidimensional("animales");
else if(posicionCategoria == 4) loadImgUnidimensional("animales-insectos");
else if(posicionCategoria == 5) loadImgUnidimensional("banno");
else if(posicionCategoria == 6) loadImgUnidimensional("cocina");
else if(posicionCategoria == 7) loadImgUnidimensional("dormitorio");
else if(posicionCategoria == 8) loadImgUnidimensional("miscel_a_nea");
else if(posicionCategoria == 9) loadImgUnidimensional("ropa");
else if(posicionCategoria == 10) loadImgUnidimensional("sal_o_n");
else if(posicionCategoria == 11) loadImgUnidimensional("transportes");
else if(posicionCategoria == 12) loadImgUnidimensional("varios-hogar");
var msToWait = 250;
setTimeout(function() {
listaPictogramas = getImgsCategoria();
while(listaPictogramas.length==0){
cargarImgsCategorias();
Log.e("esperando","esperando");
}
crearCuadricula();
hacerClic();
cargarIdiomaBarraAtras();
cargarIdiomaAcercaDe();
cargarIdiomaMenuOpciones();
}, msToWait);
}
Is very strange cause if i quit Log.e dont working, only working with Log.e and i must wait only 1 second.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Drag and drop using Javascript very slow
Facebook query very slow
Javascript and web sql insert and update query is not working?
How to print a very large image that is on the web page using JavaScript
Mongoose query is very slow (even with lean)
Javascript regex url validator is very slow?
Javascript set value of many elements is very slow
Javascript / lodash filtering an array very slow
Slow javascript loading, code seems very big?
Javascript Game Code Running Very Slow
Related Tags