爲什麼使用indexedDB時我的onsuccess/onerror回調沒有被調用？

Question

我試圖創建一個登錄表單。我有幾個用戶名（對象）在數據庫中。我創建了一個表單，它提取用戶名（主鍵）並檢查它是否在數據庫中。信息通過我的loginCheck（）方法之後，但頁面只是刷新，不運行成功，也沒有失敗的提醒我設置爲調試

JS：

//-------------USER DB------------------// 
function startDB(){ 
    //sign in page elements 
    logUser = document.getElementById('logUserName'); 
    logPass = document.getElementById('logPass'); 
    signin = document.getElementById('signin'); 
    signin.addEventListener('click',getLogin); 

    //register page elements 
    mainForm = document.getElementById('mainFormSidebar'); 
    mainForm.addEventListener('submit',addObject); 
    fname = document.getElementById('fName'); 
    lName = document.getElementById('lName'); 
    users = document.getElementById('uName'); 
    pass = document.getElementById('password'); 
    email = document.getElementById('email'); 
    dob = document.getElementById('dob'); 
    phone = document.getElementById('phone'); 
    bio = document.getElementById('bio'); 
    terms = document.getElementById('terms'); 
    school = document.getElementById('school'); 
    gender = document.getElementsByName('gender'); 
    save = document.getElementById('save'); 
    reset = document.getElementById('reset'); 
    reset.addEventListener('click',clearForm); 
    databox = document.getElementById('databox'); 



    //open DB 
    var request = indexedDB.open('macroPlay'); 
    //if fails 
    request.addEventListener('error', showerror); 
    //if succeeds 
    request.addEventListener('success', start); 
    //if !exist, create. 
    request.addEventListener('upgradeneeded', createdb); 

    //Create Admin account on launch 

} 
function showerror(e){ 
    alert('Error: ' + e.code + ' - ' + e.message); 
} 
function start(e){ 
    db = e.target.result; 
    chkAdmin(); 
    showUsers();// Show all values in the object store 
} 
function createdb(e){ 
    var datababase = e.target.result; 
    var myusers = datababase.createObjectStore('users', {keyPath: 'userName'}); 
} 
function addObject(){ 
    if(confirm('Are you sure you want to resgister?')){ 
     var fName = document.getElementById('fName').value; 
     var lName = document.getElementById('lName').value; 
     var userName = document.getElementById('uName').value; 
     var pass = document.getElementById('password').value; 
     var email = document.getElementById('email').value; 
     var dob = document.getElementById('dob').value; 
     var phone = document.getElementById('phone').value; 
     var bio = document.getElementById('bio').value; 
     var terms = document.getElementById('terms').value; 
     var school = document.getElementById('school').value; 

     //May need to set a loop to find value of radio 
     var gender; 
     var radios = document.getElementsByName('gender'); 

     for (var i = 0, length = radios.length; i < length; i++) { 
      if (radios[i].checked) { 
       gender=radios[i].value; 
      } 
     } 

     //set up transaction 
     var mytransaction = db.transaction(['users'], "readwrite"); 

     //get object store 
     var myusers = mytransaction.objectStore('users'); 

     //Add item 
     var request = myusers.add(new getUser(userName,fName,lName,pass,email,dob,phone,bio,terms,school,gender)); 
    } 

    // Show all results. 
    mytransaction.addEventListener('complete', showUsers); 

    //Reset Form Fields 
    resetForm(); 


} 
function getUser(userName, fn, ln, pw, em, dob, tel, bio,tm, scl, gender){ 
    this.userName = userName; 
    this.fn = fn; 
    this.ln = ln; 
    this.pw = pw; 
    this.em = em; 
    this.dob = dob; 
    this.tel = tel; 
    this.bio = bio; 
    this.tm = tm; 
    this.scl = scl; 
    this.gender = gender; 
} 
function showUsers(){ 
    //reset box 
    databox.innerHTML = ''; 
    //set the transaction 
    var mytransaction = db.transaction(['users']); 
    //get object store 
    var myusers = mytransaction.objectStore('users'); 
    //open the cursor and set an order 
    var newcursor = myusers.openCursor(null,"prev"); 
    //show all users on successful load of DB 
    newcursor.addEventListener('success',showUserList); 
} 
function showUserList(e){ 
    //var result = e.target.result; 
    //databox.innerHTML = '<div>' + result.id + ' - ' + result.name + ' - ' + result.date + '</div>'; 
    var cursor = e.target.result; // Capture multiple return values as a cursor 
    // Modify the databox to show the results 
    if (cursor){ 
    /* 
     databox.innerHTML = '<div>' + 
      'Username'+ ' - ' + 
      'First'+ ' - ' + 
      'Last'+ ' - '+ 
      'Pass'+ ' - '+ 
      'Email'+ ' - '+ 
      'DOB'+ ' - '+ 
      'TEL'+ ' - '+ 
      'BIO'+ ' - '+ 
      'NEWS'+ ' - '+ 
      'TOS'+ ' - '+ 
      'SCL'+' - '+ 
      'Gender </div>'; 
    */ 

     databox.innerHTML += '<div>' + 
     cursor.value.userName + ' - ' + 
     cursor.value.fn+ ' - ' + 
     cursor.value.ln+ ' - '+ 
     cursor.value.pw+ ' - '+ 
     cursor.value.em+ ' - '+ 
     cursor.value.dob+ ' - '+ 
     cursor.value.tel+ ' - '+ 
     cursor.value.bio+ ' - '+ 
     cursor.value.tm+ ' - '+ 
     cursor.value.scl+' - '+ 
     cursor.value.gender+ 
     ' <input type="button" onclick="removeobject(\'' + cursor.value.userName + '\')" value="remove"/></div>'; 
      // Add a remove button as inserted HTML 
     cursor.continue(); // Iterates over the cursor 
    } 
} 
function removeobject(keyword){ 
    // Confirm the deletion 
    if(confirm('Are you sure?')){ 
     // Set the transaction 
     var mytransaction = db.transaction(['users'], "readwrite"); 
     // Get the object store 
     var mystore = mytransaction.objectStore('users'); 
     // Delete the record with the chosen index 
     var request = mystore.delete(keyword); 
     // If success, show the updated results 
     mytransaction.addEventListener('complete', showUsers); 
    } 
} 

//reset functions 
function clearForm(){ 
    //Clear form 
    if(confirm('Clear all fields?')){ 
     resetForm(); 
    } 
    showUserList();  
} 
function resetForm(){ 
    //Reset form 
    fname = document.getElementById('fName').value=''; 
    lName = document.getElementById('lName').value=''; 
    uName = document.getElementById('uName').value=''; 
    pass = document.getElementById('password').value=''; 
    email = document.getElementById('email').value=''; 
    dob = document.getElementById('dob').value=''; 
    phone = document.getElementById('phone').value=''; 
    bio = document.getElementById('bio').value=''; 
    nl = document.getElementById('nl').value=''; 
    terms = document.getElementById('terms').checked = false; 
    school = document.getElementById('school').value=''; 
    gender = document.getElementsByName('gender').value=''; 
    showUserList();  
} 


//------Create Admin Account-----// 
function chkAdmin(){ 
    if(localStorage.getItem('admin')!="added"){    
     alert('Adding administrator Account'); 
     addAdmin(); 
    } 
} 
function addAdmin(){ 
    //set up transaction 
     var mytransaction = db.transaction(['users'], "readwrite"); 
    //get object store 
     var myusers = mytransaction.objectStore('users'); 
     var request = myusers.add(new getUser('admin','Shawn','Smith-Chao','admin')); 
     request.addEventListener('success',showUsers); 
    //Locally store that admin as been created 
     var admin = 'admin'; 
     var value = 'added'; 
     newItem(admin,value); 
} 


//--------Retrieve User Date---------// 
function getLogin(){ 
    alert('getLogin launched'); 
    var user = logUser.value; 
    var pass = logPass.value; 
    alert('User: '+user+' Pass: '+pass+" sent to loginCheck"); 
    loginCheck(user,pass); 
    alert ('user/pass checked'); 
} 

function loginCheck(user,pass){ 
    var transaction = db.transaction(['users']); 
    var mystore = transaction.objectStore('users'); 
    alert('User table opened'); 
    var request = transaction.get(user); 
    alert('passed the get user request'); 
    request.onerror = function (event){ 
     alert("username does not exist"); 
    }; 
    request.onsuccess =function (event){ 
     alert('request was successful'); 
     /*alert("Welcome "+ request.result.userName);*/ 
     //run function populating all fields 

    } 
} 

我把警報在開始（e）函數，它似乎在顯示用戶/密碼的警報之後立即被調用。我環顧四周，我無法弄清楚一直在說什麼。另外，如果我將loginCheck更改爲此，警報運行並且代碼進一步警告（'user/pass checked'）;但是然後開始（e）再次打電話。

Answer 1

indexeddb API的工作原理是異步的，這就是爲什麼警報沒有按照您想要的順序顯示。由於API是異步的，意味着所有其他代碼都會在等待異步調用完成時執行。