Question

我创建了一个包含我的Sql Server数据的json文件。使用XmlHttpRequest的GET方法，我正在读取json文件并迭代并将这些记录保存到我的IndexedDB中。一切正常。在迭代结束后，我编写了一个代码来提醒用户..但是警告消息是显示得非常快，但是当我在控制台窗口中看到它时，保存操作一直到处理。我想在操作完成后提醒用户..

我的代码是，

if (window.XMLHttpRequest) {
    var sFileText;
    var sPath = "IDBFiles/Reservation.json";
    //console.log(sPath);
    var xhr = new XMLHttpRequest();
    xhr.open("GET", sPath, 1);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            if (xhr.responseText != "") {
                sFileText = xhr.responseText;
                //console.log(sFileText);
                var val = JSON.parse(sFileText);
                var i = 0;
                var value = val.length;

                for(var i in val)
                {
                    var code = val[i].RTM_res_category_code;
                    var desc = val[i].RTM_res_category_edesc;

                    addReserv(code, desc);
                }
                if(i >= value-1) {
                    console.log("Reservation Load Completed... "+i);
                    document.getElementById("status").innerHTML = "Reservation Loading Success...";
                }
            }
        }
    }
    xhr.send();
}

//Passing Parameters to Reservation
function addReserv(code, desc)
{
document.querySelector("#status").innerHTML = "Loading Reservation.. Please wait...";

var trans = db.transaction(["Reservation"], "readwrite");
var store = trans.objectStore("Reservation");
//console.log(store);

var reserv={ RTM_res_category_code : code, RTM_res_category_edesc : ''+desc+'' };
var request = store.add(reserv);

request.onerror = function(e) {
    console.log(e.target.error.name);
    document.querySelector("#status").innerHTML = e.target.error.name;
}

request.onsuccess = function(e) {
    console.log("Reservation Saved Successfully.");
    //document.querySelector("#status").innerHTML = "Reservation Loaded Successfully.";
}
}

Answer 1

感谢您提出问题。

您目前正在做什么，但由于IDB的异步特性，警报很快就会出现。

你应该避免这种情况。 1.仅创建一次您的交易。 2.在这一笔交易中完成所有操作。 3.事务对象具有可用于通知用户的不完整回调。

以您的示例为例。而不是循环遍历ajax回调中的项目，将集合传递给add方法并在那里循环

if (window.XMLHttpRequest) {
   var sFileText;
   var sPath = "IDBFiles/Reservation.json";
   //console.log(sPath);
   var xhr = new XMLHttpRequest();
   xhr.open("GET", sPath, 1);
   xhr.onreadystatechange = function() {
       if (xhr.readyState == 4 && xhr.status == 200) {
          if (xhr.responseText != "") {
              sFileText = xhr.responseText;
              //console.log(sFileText);
              var val = JSON.parse(sFileText);
              import(val);
          }
      }
   }
   xhr.send();
}

function import(values)
{
   document.querySelector("#status").innerHTML = "Loading Reservation.. Please wait...";

   var trans = db.transaction(["Reservation"], "readwrite");
   var store = trans.objectStore("Reservation");
   var i = 0;
   var value = val.length;

   for(var i in val)
   {
      var code = val[i].RTM_res_category_code;
      var desc = val[i].RTM_res_category_edesc;

      var reserv={ RTM_res_category_code : code, RTM_res_category_edesc : ''+desc+'' };
      var request = store.add(reserv);

      request.onerror = function(e) {
          console.log(e.target.error.name);
          document.querySelector("#status").innerHTML = e.target.error.name;
      }

      request.onsuccess = function(e) {
          console.log("Reservation Saved Successfully.");
          //document.querySelector("#status").innerHTML = "Reservation Loaded Successfully.";
      }
  }
  trans.oncomplete = function ()  {
      console.log("Reservation Load Completed... "+i);
      document.getElementById("status").innerHTML = "Reservation Loading Success...";
  }
}

从XMLHttpRequest保存数据响应我的IndexedDB

1 个答案: