javascript - 在 IndexedDB 的对象存储 block UI 中插入大量数据

Question

我想在我的 IndexedDB 的对象存储中保存大约 35000 个对象。我正在使用下面的代码插入。

AddListings = function (x2j_list_new, callback) {   
    var transaction = db.transaction(["listings"], IDBTransaction.READ_WRITE);
    var count = 0;
    transaction.oncomplete = function (event) {
        if (callback) {
            console.log('x2jShowListing Added ' + count + '/' + x2j_list_new.length);
                callback([count, x2j_list_new.length]);
            }
    };
    transaction.onerror = function (e) {
       console.log("myError: ", e);  
       if (callback) {
          callback(false);
       }
    };
    var store = transaction.objectStore("listings");

    $.each(x2j_list_new, function (index0, item0) {
        var request = store.put(item0);
        request.onsuccess = function (event) {
            count++;
            // event.target.result  
            };
        });
    });        
};

上面的代码工作正常，但是循环和插入超过 35000 个对象会使 UI 无响应约 200 秒。我想也许我可以使用 WebWorkers，但 IndexedDB 在 WebWorkers 中不可用。我试图找到一种批量插入的方法，但找不到。关于如何在不阻塞 UI 的情况下插入大量对象的任何想法？

Answer 1

您走在正确的轨道上，但是您要求浏览器在有机会完成存储一个对象之前存储 35,000 个对象。这是在开始下一个请求之前异步等待一个请求完成的代码(但使用相同的事务):

    openRequest = window.indexedDB.open("MyDatabase", 1);
    openRequest.onerror = function(event) {
        console.error(event);
    };
    openRequest.onsuccess = function (event) {
        var db = openRequest.result;
        db.onerror = function(event) {
            // Generic error handler for all errors targeted at this database's requests
            console.error(event.target);
            window.alert("Database error: " + event.target.wePutrrorMessage || event.target.error.name || event.target.error || event.target.errorCode);
        };
        var transaction = db.transaction('item', "readwrite");
        var itemStore = transaction.objectStore("item");
        putNext();

        function putNext() {
            if (i<items.length) {
                itemStore.put(items[i]).onsuccess = putNext;
                ++i;
            } else {   // complete
                console.log('populate complete');
                callback();
            }
        }           
    };