How to do Threading in Javascript How to do Threading in Javascript jquery jquery

How to do Threading in Javascript


[Added my comment as an answer]

JavaScript is single threaded. You'll have to break your work up into pieces and call them in sequence using "setTimeout" to allow the GUI to update during processing (in between your calls) but even then the browser will still seem somewhat unresponsive.


You can try using WebWorker: https://developer.mozilla.org/en/DOM/Worker
Thus worker are executed in parallel of the main thread, you cannot exactly achieve multi-threading using workers: you cannot modify the UI from a worker.
You can maybe create your grid as a string in a worker and when the worker finish, append it where you want.


If you do all the building of the Database in a setTimeout, the rest of the page should be responsive.

You can construct the html elements in that function, and when it is ready, attach it to the DOM. You will also have to call functions or send events to update the display of the progress bar.

Edit after comment:

This will run in background and won't affect responsiveness of the page:

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

You already update your progressbar from your function, so this should do it.

However, you might want to decouple the code generating the datatable from the code updating the progressbar.