javascript - Ajax IndexedDB 删除当前成功上传

Question

我昨天发布了类似的内容，但它有效，但只删除了数据中的最后一个对象。

我想要发生什么

这个ajax上传将处理大量数据，所以我使用indexeddb。这也将在手机上使用。因此，我希望它一次上传一项，如果一项失败，则仅删除数据中的前一项，这样他们就不需要再次上传所有内容。

我尝试过 async = false，这完全按照我想要的方式工作，但是这会卡住浏览器。

当前代码尝试注释掉任何可能令人困惑的部分，目前这只在完成后删除最后一项。

function uploadData(e) {

 //Get Database 
 var transaction = db.transaction(["data"], "readonly");
 var objectStore = transaction.objectStore("data");
 var cursor = objectStore.openCursor();

 //Starts Looping
 cursor.onsuccess = function(e) {
     var res = e.target.result;
     if (res) {
         if (navigator.onLine) {
             $('.popup-heading').text('Uploading...');
             var passData = {
                 client_id: res.value.client_id,
                 parent_id: res.value.parent_id,
                 storename: res.value.storename,
                 image: res.value.image,
                 key: res.key,
             };
             var jsonData = JSON.stringify(passData);
             $.ajax({
                 url: "{{ path('destination_app_ajax') }}",
                 type: "post",
                 // Works but freezes browser 
                 /*async, flase*/
                 data: {
                     "json": passData
                 },
                 success: function(JsonData) {

                     //Delete item once successfull 
                     var t = db.transaction(["data"], "readwrite");
                     var request = t.objectStore("data").delete(passData.key);
                     t.oncomplete = function(event) {
                         console.log('item deleted');
                     };
                 },
                 error: function() {
                     $('.popup-heading').text('Upload Failed!');
                 }
             });
         } else {
             $('.popup-heading').text('Please find stronger signal or wifi connection');
         }
         res.
         continue ();
     }
 }

}

Answer 1

听起来您的 passData 存在范围问题。在循环内部，但在定义 var passData = ... 之前，尝试使用匿名函数包装代码块:

(function() {
   /* Your code here */
}());

这应该可以防止 passData 泄漏到全局范围，这似乎就是为什么您的 IDB 代码仅在最后一个循环上工作的原因。 (passData 每次在 AJAX 响应完成之前都会被重新定义。)

更新:没有循环，您正在处理回调。我看到发生的情况是，您在每个 Ajax 请求上重新定义 onsuccess 处理程序(并覆盖除最后一个值之外的所有值)，重用同一事务。尝试将此事务代码移至 AJAX 请求的成功回调中:

//Get Database 
 var transaction = db.transaction(["data"], "readonly");
 var objectStore = transaction.objectStore("data");
 var cursor = objectStore.openCursor();

这将创建一个闭包并在每个响应上提交您的删除事务。这意味着每个 AJAX 请求一个事务，每个 AJAX 请求一个 onsuccess 回调(无需重新定义)。