Databases
StackOverflow2013
Postsdbo
POBackground tasks in JavaScript that do not interfere UI interaction
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackground tasks in JavaScript that do not interfere UI interaction
    primarykey
    data
    text
    <p>I am working on a mobile App implemented in JavaScript that has to do lots of background stuff -- mainly fetching data from a server (via JSONP) and writing it into a database using local storage. In the foreground the user may navigate on the locally stored data and thus wants a smoothly reacting App. </p> <p>This interaction (fetching data from server via JSONP and after doing some minor work with it, storing it in the local database) is done asynchroniously, but because of the necessary DOM manipulation for JSONP and the database interaction I am not able to this work with WebWorkers. Thus I am running in the problem in blocking the JavaScript event queue with lots of "background processing requests" and the App reacts very slowly (or even locks completely).</p> <p>Here is a small scetch of the way I am doing the background stuff:</p> <pre><code> var pendingTasksOnNewObjects = new Object(); //add callbacks to queue function addTaskToQueue(id, callback) { if (!pendingTasksOnNewObjects[id]) { pendingTasksOnNewObjects[id] = new Array(); } pendingTasksOnNewObjects[id].push(callback); } // example for this pending tasks: var myExampleTask = function () { this.run = function(jsonObject) { // do intersting stuff here as early as a specific new object arrives // i.e. update some elements in the DOM to respect the newly arrived object }; }; addTaskToQueue("id12345", myExampleTask); // method to fetch documents from the server via JSONP function getDocuments(idsAsCommaSeparatedString) { var elem; elem = document.createElement("script"); elem.setAttribute("type", "text/javascript"); elem.setAttribute("src", "http://serverurl/servlet/myServlet/documents/"+idsAsCommaSeparatedString); document.head.appendChild(elem); } // "callback" method that is used in the JSONP result to process the data function locallyStoreDocuments(jsonArray) { var i; for (i=0; i&lt;jsonArray.length; i++) { var obj = jsonArray[i]; storeObjectInDatabase(obj); runTasks(obj.docID, obj); } return true; } // process tasks when new object arrives function runTasks(id, jsonObject) { if(pendingTasksOnNewObjects[id]) { while(pendingTasksOnNewObjects[id][0]) { pendingTasksOnNewObjects[id][0].run(jsonObject); pendingTasksOnNewObjects[id].shift(); } } return true; } </code></pre> <p>I already looked around reading some stuff about the event processing mechanisms in JavaScript (i.e. <a href="http://ejohn.org/blog/how-javascript-timers-work/" rel="nofollow">John Resigs description of working with timers</a>), but what I really want to do is the following: Check if there is something to do in the event queue. If so, wait for 100ms and check again. If nothing is currently waiting in the queue, process a small amount of data and check again.</p> <p>As far as I read, this is not possible, since JavaScript does not have direct access to the event queue. </p> <p>So are there any design ideas on how to optimize my code to get closer to the goal not to interfere with the UI events to give the user a smooth App interaction?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USChagemei
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POBackground tasks in JavaScript that do not interfere UI interaction
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POBackground tasks in JavaScript that do not interfere UI interaction
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload