2

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

这种交互（通过 JSONP 从服务器获取数据并在对其进行一些小的工作之后，将其存储在本地数据库中）是异步完成的，但是由于 JSONP 和数据库交互的必要 DOM 操作，我无法使用它网络工作者。因此，我遇到了用大量“后台处理请求”阻塞 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事件的目标，给用户一个流畅的App交互呢？

4

1 回答 1

1

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

于 2011-11-17T08:03:19.690 回答