jQuery - Can threads/asynchronous be done?

Question

I\'m currently using AJAX with Django Framework.

I can pass asynchronous POST/GET to Django, and let it return a

Answer 1

Deferreds/promises won't help you here. JS in the browser is always single-threaded.

The trick is not to build up DOM elements via JS. That is always going to be expensive and slow. Rather than passing data in JSON from Django and building up a DOM dynamically, you should get Django to render a template fragment on the server side and pass that whole thing to the front-end, where the JS can simply insert it at the relevant point.

Answer 2

Try processing retrieved data incrementally.

At piece below , elements generated in blocks of 250 , primarily utilizing jQuery deferred.notify() and deferred.progress().

When all 10,000 items processed , the deferred object is resolved with the collection of 10,000 elements. The elements are then added to document at single call to .html() within deferred.then()'s .done() callback ; .fail() callback cast as null .

Alternatively , could append elements to the document in blocks of 250 , within deferred.progress callback ; instead of at the single call within deferred.done , which occurs upon completion of the entire task.

setTimeout is utilized to prevent "freeze the web browser" condition .

$(function() {
// 10k items 
var arr = $.map(new Array(10000), function(v, k) {
  return v === undefined ? k : null
});
  
var len = arr.length;
var dfd = new $.Deferred();
// collection of items processed at `for` loop in blocks of 250
var fragment = [];
var redraw = function() {
  for (i = 0 ; i < 250; i++)
    {
        // configurationVariableChart.row.add(
        // $(
        fragment.push('<tr>' +
                '<td>' + arr[i] + '</td>' +
            '</tr>')
        // )[0]);
    };
    arr.splice(0, 250);
    console.log(fragment, arr, arr.length);
    return dfd.notify([arr, fragment])
};

$.when(redraw())
// `done` callbacks
.then(function(data) {
  $("#results").html(data.join(","));
  delete fragment;
}
  // `fail` callbacks      
 , null
  // `progress` callbacks
 , function(data) {
  // log ,  display `progress` of tasks
     console.log(data);
     $("progress").val(data[1].length);
     $("output:first").text(Math.floor(data[1].length / 100) + "%");
     $("output:last").text(data[1].length +" of "+ len + " items processed");
     $("#results").html("processing data...");
     if (data[0].length) {
         var s = setTimeout(function() {
             redraw()
         }, 100)
     } else {
       clearTimeout(s);
       dfd.resolve(data[1]);
     }
})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<progress min="0" max="10000"></progress><output for="progress"></output>
<output for="progress"></output><br />
<table id="results"></table>

jsfiddle http://jsfiddle.net/guest271314/ess28zLh/