Callback execution sequence in Javascript, Retrieving from IndexeddB

问题

If I've a code like this:

testJSCallbacks();

function testJSCallbacks(){
    var i = 0;

    for (i = 0; i < 5; i++){
        console.log("Step 1 "+i);
        foo(i, myCB);
    }

}

function foo(key, fnCB){
    //retrieve png image blob from indexedDB for the key 'key'. Assume that the database is
    //created and started properly
    var getRequest = transaction.objectStore("store").get(key);
    getRequest.onsuccess = function (event) {
        var result = event.target.result;
        if(result){
            console.log("Step 2 " + key + " Found");
        }else{
            console.log("Step 2 " + key + " not Found");    //for the same 'key' value this happens before the above result is valid. i.e. key found
        }
        fnCB(result);
    }
}

myCB = function (result){
    console.log("Step 3 "+result);
}

Actual Output (just for example):

Step 1 0
Step 1 1
Step 1 2
Step 1 3
Step 1 4

Step 2 0 Found
.
.

Step 3 <result>
.
.
.

Desired output:

 Step 1 0
 Step 2 0 Found
 Step 3 <result value of key 0 goes here>

In my code I'm trying to read png blobs from IndexedDB, which are already stored earlier. But while reading/searching for a specific blob it takes too long to get the result back, meanwhile a search for second blob occurs even though the earlier search is not finished yet.

Can anyone advise what/how would you do if you need to call an asynchronous function in a loop multiple times and the callback takes too long to come? Is my code correct and makes logical sense or this isn't how javascript is done? I'm very new to this and come from an embedded C background.

回答1:

The problem is the getRequest.onsuccess function is asynchronous, while the for loop executes synchronously. This is why it finishes first... In fact, while you are executing the testJsCallbacks, nothing else will execute until the current execution context ends and control is returned back to the javascript event queue because javascript execution context within the browser is single threaded.

To do what you desire, I would suggest using a promise library. Then you can write code like this (see jsfiddle which uses Q.js library):

testJSCallbacks();

function testJSCallbacks(){
    var i = 0,
        promise;

    for (i = 0; i < 5; i++) {
        //Make initial promise if one doesn't exist
        if (!promise) {
            promise = Q.fcall(getStep(i));
        }
        //Append to existing promise chain
        else {
            promise = promise.then(getStep(i));
        }
        //then function returns another promise that can be used for chaining.
        //We are essentially chaining each function together here in the loop.
        promise = promise.then(function (key) {
            //Log the output of step here
            console.log("Step 1 " + key);
            return key;
        })
        //then function takes a callback function with one parammeter (the data).
        //foo signature meets this criteria and will use the resolution of the last promise (key).
        .then(foo)
        //myCB will execute after foo resolves its promise, which it does in the onsuccess callback
        .then(myCB);
    }
}

function getStep(step) {
    return function () {
        return step;
    }
}

function foo(key) {
    //retrieve png image blob from indexedDB for the key 'key'. Assume that the database is
    //created and started properly
    var getRequest = transaction.objectStore("store").get(key),
        //Need to return a promise
        deferred = Q.defer();
    getRequest.onsuccess = function (event) {
        var result = event.target.result;
        if(result){
            console.log("Step 2 " + key + " Found");
        }else{
            console.log("Step 2 " + key + " not Found");    //for the same 'key' value this happens before the above result is valid. i.e. key found
        }
        deferred.resolve(result);
    }

    return deferred.promise;
}

function myCB (result){
    console.log("Step 3: " + result);
}

The jsfiddle uses a setTimeout instead of objectStore to demonstrate the async nature.

Explaining getStep function:

getStep function is like a "seed" function in that it kicks off resolving the chain of what you want to do (i.e. Step 1, Step 2, Step 3). It simply creates a function that returns the value of the variable passed in. This is used to pass into the function that console.logs Step 1 in the promise resolution chain and then returns the value for the next promise resolution (Step 2)... JavaScript has the concept of closures and in order to get the correct value for step number (instead of the value of 'i' at the time when the callbacks are executed) we needed to create a closure for the variable i.

To demonstrate, consider this code:

HTML:

<button type="button">0</button>
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">4</button>

addHandlers();

function addHandlers() {
    //Don't do this. Just demonstrating a feature:
    var buttons = document.getElementsByTagName("button") || [],
        i, len = buttons.length;
    for (var i = 0; i < len; i++) {
        buttons[i].onclick = function () {
            //will always alert 5
            alert(i);
        }
    }
}

Since the variable i is 5 after the for loop ends, this is the value that is used in the function. This is why you would need to create a closure for i (using getStep again for clarity):

addHandlers();

function addHandlers() {
    var buttons = document.getElementsByTagName("button") || [],
        i, len = buttons.length;


    for (var i = 0; i < len; i++) {
        //getStep creates a function with a closure for i at its current value in the loop
        buttons[i].onclick = getStep(i);
    }
}

function getStep(i) {
    return function () {
            alert(i);
        }
}

Fiddle for before and after.

来源：https://stackoverflow.com/questions/22538692/callback-execution-sequence-in-javascript-retrieving-from-indexeddb

标签

javascript

callback

indexeddb