Question

我正在开发一个用JavaScript实现的移动应用程序，它必须做很多后台工作 - 主要是从服务器获取数据（通过JSONP）并使用本地存储将其写入数据库。在前台，用户可以在本地存储的数据上导航，因此想要平滑的反应App。

这种交互（通过JSONP从服务器获取数据并在对其进行一些小工作后，将其存储在本地数据库中）是异步完成的，但由于JSONP和数据库交互的必要DOM操作，我无法这项工作与WebWorkers合作。因此，我遇到了阻塞JavaScript事件队列的问题，其中包含大量“后台处理请求”，而App的反应非常缓慢（甚至完全锁定）。

这是我做背景的方式的一小部分：

    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 description of working with timers），但我真正想做的是：检查事件队列中是否有事情要做。如果是，请等待100毫秒并再次检查。如果队列中当前没有等待，则处理少量数据并再次检查。

据我所知，这是不可能的，因为JavaScript无法直接访问事件队列。

那么有没有关于如何优化我的代码以更接近目标而不干扰UI事件以便为用户提供顺畅的App交互的设计思路？

Answer 1

Web Worker似乎在iOS 5中可用，http://caniuse.com/webworkers

JavaScript中的后台任务不会干扰UI交互

1 个答案: