Cómo hacer Threading en Javascript

Question

Así que tengo un objeto JSON grande que estoy volviendo del servidor, luego construyendo una datatable desde él y mostrándolo en el formulario. Esto generalmente toma unos segundos ... así que estaba pensando en una barra de carga. Tengo la lógica detrás de la barra de carga, sin embargo, el ciclo que crea los datos hmtl bloquea el navegador y no puedo llamar al elemento que necesito actualizar.

Aquí es mi función para hacer esto:

function buildDataTable(db_table, container_id) { 
    var $pb = $("<div id=\"progress-bar\"></div>"); 
    $(container_id).html($pb); 
    $pb.progressbar({ 
     value: 0 
    }); 
    $.post("post location", { 
     view: "all" 
    }, function (data) { 
     var headers = ""; 
     var contents = ""; 
     var jsonObject = $.parseJSON(data); 
     var tik = Math.round(jsonObject.length/100); 
    for (key in jsonObject[0]) { 
      headers += "<th>" + key.replace(" ", "&nbsp;") + "</th>"; 
     } 
     for (i in jsonObject) { 
      contents += "<tr>"; 
      for (j in jsonObject[i]) { 
       contents += "<td class=\"border-right\">" + jsonObject[i][j] + "</td>"; 
      } 
      contents += "</tr>"; 
      if(Math.round(i/tik) == i/tik) { 
/* if I run the alert (between popups) i can see the progressbar update, otherwise I see no update, the progressbar appears empty then the $(container_id) element is updated with the table i've generated */ 
       alert(''); 
       $pb.progressbar("value",i/tik); 
      } 
     } 
     var html = "<table cellpadding=\"5\" cellspacing=\"0\"><thead><tr>" + headers + "</tr></thead><tbody>" + contents + "</tbody></table>"; 

     $(container_id).html(html); 
     $(container_id).children("table:first").dataTable({ 
      "bJQueryUI": true, 
      "sScrollX": "100%" 
     }); 
    }); 
} 

Answer 1

[Agregado mi comentario como respuesta]

JavaScript es de un solo subproceso. Tendrá que dividir su trabajo en pedazos y llamarlos en secuencia usando "setTimeout" para permitir que la GUI se actualice durante el procesamiento (entre sus llamadas) pero aun así el navegador aún no parecerá responder.

Answer 2

Usted puede intentar usar WebWorker: https://developer.mozilla.org/en/DOM/Worker
Así trabajador se ejecutan en paralelo del hilo principal, no se puede lograr exactamente multi-threading usando trabajadores: no se puede modificar la interfaz de usuario de un trabajador.
Quizás pueda crear su cuadrícula como una cadena en un trabajador y cuando el trabajador termine, agréguela donde desee.

Answer 3

Si hace todo el edificio de la base de datos en un setTimeout, el resto de la página debe responder.

Puede construir los elementos html en esa función, y cuando esté listo, adjúntelo al DOM. También deberá llamar a funciones o enviar eventos para actualizar la visualización de la barra de progreso.

Edición después de comentario:

Esto ejecutará en segundo plano y no afectará a la capacidad de respuesta de la página:

window.setTimeout(function() {buildDataTable(db_table, container_id)}, 0);

Ya actualice su progressbar de su función, así que esto debería hazlo.

Sin embargo, es posible que desee desacoplar el código que genera la tabla de datos del código actualizando la barra de progreso.

Answer 4

Parece que la única manera limpia de hacerlo en mi aplicación es procesar el json en el servidor y crear el html allí. Luego devuelva el html al navegador a través de $.post()

Se perderá la barra de progreso. sin embargo, puedo usar un gif infinito de carga ...