Question

I’m trying following in Firefox 5.0:

var db;
var request = mozIndexedDB.open("MyTestDatabase");
request.onerror = function(event) {
  alert("Why didn't you allow my web app to use IndexedDB?!");
};
request.onsuccess = function(event) {
  db = request.result;
  //db = event.target.result; //also tried this
  console.log(db); //get the object
};

console.log(db); //undefined

I want db, accessible outside the handler. What is the issue here?
I am trying to learn something from this.

There must be a simple thing that I am missing..

Answer 1

Your db variable is assigned a value inside the success handler:

request.onsuccess = function(event) {
  db = request.result;
  //db = event.target.result; //also tried this
  console.log(db); //get the object
};

That handler will be called asynchronously and, in particular, it hasn’t been called when you do this:

console.log(db); //undefined

so you end up with the initial value of db that you get from var db;.

So, you can access db outside the callback but it won’t necessarily have a useful value when you want it to. The usual approach is to put calls to things that need db inside the success handler. If you need to use db elsewhere, you’ll have to check that is is defined before you use it and wait if it isn’t.

If you need to wait for db to be ready before continuing with your application then something like this should work:

var timer = setInterval(function() {
    if(!db) // Not ready yet.
        return;
    // We have a db so we can stop waiting
    clearInterval(timer);
    // and get on with our real work.
    start_main_application();
}, 100);

The setInterval will trigger every 0.1s and check if there is a db yet; if it isn’t then it does nothing until the next time the interval is triggered; if there is a db, then it shuts down the timer and starts the main application.