全局变量只能被第一个函数访问？

Question

I have an OK understanding of JS but am ultimately still learning. I'm trying to recreate a PHP/mySQL project over to IndexedDB and can't work out why I'm seeing an error here.

The IndexedDB connection works as expected. The first function (createItem) functions fine, however the second function (getItems) is returning an error claiming that the "db" variable is undefined. It's a global variable so should be accessible by the function's scope, and the createItem function has no problem using it. Can anyone help me see what I've missed here.

// GLOBAL DB VAR
var db;
// WAIT FOR DOM
document.addEventListener("DOMContentLoaded", function(){
    // IF INDEXED DB CAPABLE
    if("indexedDB" in window) {
        // OPEN DB
        var openRequest = indexedDB.open("newTabTest",1);
        // CREATE NEW / UPDATE
        openRequest.onupgradeneeded = function(e) {
            // Notify user here: creating database (first time use)
            var thisDB = e.target.result;
            // Create "items" table if it doesn't already exist
            if(!thisDB.objectStoreNames.contains("items")) {
                var store = thisDB.createObjectStore("items", {keyPath: "id", autoIncrement: true});
                store.createIndex("name","name", {unique:true});
                store.createIndex("folder","folder", {unique:false});
                store.createIndex("dial","dial", {unique:false});
            }
        }
        openRequest.onsuccess = function(e) {
            // Success- set db to target result.
            db = e.target.result;
        }
        openRequest.onerror = function(e) {
            // DB ERROR :-(
        }
    }
},false);

// CREATE ITEM FUNCTION
function createItem(n,u,f,c) {
    var transaction = db.transaction(["items"],"readwrite");
    var store = transaction.objectStore("items");
    var item = {
        name: n,
        url: u,
        folder: f,
        colour: c,
        dial: 0,
        order: 100
    }
    var request = store.add(item);
    request.onerror = function(e) {
        console.log("An error occured.");
    }
    request.onsuccess = function(e) {
        console.log("Successfully added.")
    }
};

// GET ITEM(S) FUNCTION
// Specify index and key value OR omit for all
function getItems(callback, ind, key) {
    var transaction = db.transaction(["items"],"readonly");
    var store = transaction.objectStore("items");
    var response = [];

    // If args are omitted - grab all items
    if(!ind | !key) {
        var cursor = store.openCursor();
        cursor.onsuccess = function(e) {
            var res = e.target.result;
            if(res) {
                var r = {
                    "name": res.value['name'],
                    "url": res.value['url'],
                    "folder": res.value['folder'],
                    "colour": res.value['colour'],
                    "dial": res.value['dial'],
                    "order": res.value['order']
                };
                response.push(r);
                res.continue();
            }
        }
        cursor.oncomplete = function() {
            callback(response);
        }
    } else {
        // If both args are specified query specified index
        store = store.index(ind);
        var range = IDBKeyRange.bound(key, key);
        store.openCursor(range).onsuccess = function(e) {
            var res = e.target.result;
            if(res) {
                var r = {
                    "name": res.value['name'],
                    "url": res.value['url'],
                    "folder": res.value['folder'],
                    "colour": res.value['colour'],
                    "dial": res.value['dial'],
                    "order": res.value['order']
                };
                response.push(r);
                res.continue();
            }
        }
        cursor.oncomplete = function() {
            callback(response);
        }
    }
};

Answer 1

As you've figured out in comments, you do have to stick the db-dependent actions inside a function called from a success handler.

This callback-based programming quickly becomes a pain, and a common solution for that is to use promises .

However, making IndexedDB work with promises is still work-in-progress (see https://github.com/inexorabletash/indexeddb-promises if you're interested).

If your goal is to get something done (and not to learn the bare IndexedDB APIs), perhaps you'd be better off finding a wrapper library for IndexedDB (can't recommend one though, since I've not tried working seriously with IDB yet).

Answer 2

I would not recommend using a variable like 'db' as you have in your example. If you are new to reading and writing asynchronous Javascript, you are just going to cause yourself a lot of pain. There are better ways to do it. It takes several pages to explain and is explained in many other questions on StackOverflow, so instead, very briefly, consider rewriting your code to do something like the following:

function createItem(db, ...) {
  var tx = db.transaction(...);
  // ...
}

function openIndexedDBThenCreateItem(...) {
  var openRequest = indexedDB.open(...);
  openRequest.onsuccess = function(event) {
    var db = event.target.result;
    createItem(db, ...);
  };
}

function getItems(db, callback, ...) {
  var tx = db.transaction(...);
  var items = [];
  tx.oncomplete = function(event) {
    callback(items);
  };

  // ...
  var request = store.openCursor(...);
  request.onsuccess = function(event) {
    var request = event.target;
    var cursor = event.target.result;
    if(cursor) {
      var item = cursor.value;
      items.push(item);
      cursor.continue();
    }
  };
}

function openIndexedDBThenGetItems(db, callback, ...) {
  var openRequest = indexedDB.open(...);
  openRequest.onsuccess = function(event) {
    var db = event.target.result;
    getItems(db, callback, ...);
  };
}

Also, you don't need to wait for DOMContentLoaded to start using indexedDB. It is immediately available.

If you get the above code, then you can consider a further improvement of adding a simple helper function:

function openIndexedDB(callback) {
  var openRequest = indexedDB.open(...);
  openRequest.onerror = callback;
  openRequest.onsuccess = callback;
}

And then rewrite the examples like this:

function openIndexedDBThenCreateItem(...) {
  openIndexedDB(function onOpen(event) {

     if(event.type !== 'success') {
       console.error(event);
     } else {
       var db = event.target.result;
       createItem(db, ...);
     }
  });
}

function openIndexedDBThenGetItems(...) {
  openIndexedDB(function onOpen(event) {
     if(event.type !== 'success') {
       console.error(event);
     } else {
       var db = event.target.result;
       getItems(db, ...);
     }
  });
}