私はJavaScriptで実装されたモバイルアプリに取り組んでいます。これは、主にサーバーから（JSONPを介して）データをフェッチし、ローカルストレージを使用してデータベースに書き込むなど、多くのバックグラウンド処理を実行する必要があります。フォアグラウンドでは、ユーザーはローカルに保存されたデータをナビゲートする可能性があるため、スムーズに反応するアプリが必要です。
この相互作用（JSONPを介してサーバーからデータをフェッチし、それを使ってマイナーな作業を行った後、ローカルデータベースに保存する）は非同期で行われますが、JSONPに必要なDOM操作とデータベースの相互作用のため、これを行うことはできませんWebWorkers。したがって、多くの「バックグラウンド処理要求」でJavaScriptイベントキューをブロックするという問題が発生し、アプリの反応が非常に遅くなります（または完全にロックされます）。
これが私が背景をやっている方法の小さなスケッチです：
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<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;
}
JavaScriptのイベント処理メカニズム（つまり、タイマーの操作に関するJohn Resigsの説明）についてはすでに読んでいましたが、本当にやりたいことは次のとおりです。イベントキューに何かすることがあるかどうかを確認します。その場合は、100ミリ秒待ってから、もう一度確認してください。現在キューで待機しているものがない場合は、少量のデータを処理して再度確認してください。
私が読んだ限りでは、JavaScriptはイベントキューに直接アクセスできないため、これは不可能です。
では、UIイベントに干渉しないようにコードを最適化して、ユーザーがアプリをスムーズに操作できるようにするための設計上のアイデアはありますか？