问题是getRequest.onsuccess函数是异步的，而for循环是同步执行的。这就是它首先完成的原因......事实上，当您执行 testJsCallbacks 时，在当前执行上下文结束并将控制权返回给 javascript 事件队列之前不会执行任何其他操作，因为浏览器中的 javascript 执行上下文是单线程的。
为了做你想做的事，我建议使用promise library。然后你可以写这样的代码（见jsfiddle使用Q.js库）：
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);
}
jsfiddle 使用 setTimeout 代替 objectStore 来展示异步特性。
解释 getStep 函数：
getStep 函数就像一个“种子”函数，它开始解析您想要执行的操作链（即步骤 1、步骤 2、步骤 3）。它只是创建了一个函数，该函数返回传入的变量的值。这用于传递给 console.logs 承诺解析链中的第 1 步的函数，然后返回下一个承诺解析的值（第 2 步）。 . JavaScript 有闭包的概念，为了获得正确的步数值（而不是执行回调时的 'i' 值），我们需要为变量 i 创建一个闭包。
为了演示，请考虑以下代码：
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);
}
}
}
由于在 for 循环结束后变量 i 为 5，因此这是函数中使用的值。这就是为什么您需要为 i 创建一个闭包（为清楚起见再次使用 getStep）：
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);
}
}
before 和 after 的小提琴。