I'm trying to take the values of a certain key from an indexed DB and add them to an array, this array works fine within the onsuccess function but is empty after it. I'm guessing by the order the two years[0] that are logged to the console appear that problem is something to do with being asynchronous. I'm obviously not really understanding what order things are happening in and how to achieve what I want. Could someone please help me understand what the problem is and maybe point me in the right direction to overcoming it.
我正在尝试从索引的数据库中获取某个键的值并将它们添加到数组中，此数组在onsuccess函数中正常工作但在它之后为空。我猜这个记录到控制台的两年[0]的顺序似乎是问题与异步有关。我显然不是很了解发生的事情是什么，以及如何实现我想要的。有人可以帮我理解问题是什么，也许可以指出我正确的方向来克服它。
// the array I want the values in
var years = new Array();
// function retrieves all objects between certain years, low and high
function getYears(low, high){
var request = window.indexedDB.open("matchDB", 1);
request.onerror = function(event) {console.log("onerror");}
request.onsuccess = function(event) {
var db = event.target.result;
var objectStore = db.transaction(["matches"], 'readonly').objectStore("matches");
var index = objectStore.index("year");
var range = IDBKeyRange.bound(low, high, true, true);
var request = index.openCursor(range);
request.onsuccess = function(evt) {
var cursor = evt.target.result;
if (cursor) {
var matchList = cursor.value;
// the value of the key year is pushed into the array years
years.push(matchList.year);
console.log(years[0]); // this works
cursor.continue();
}
}
console.log(years[0]); //this is undefined
}
}
1 个解决方案
#1
1
request.onsuccess is a callback function that will get called when the asynchronous request has completed. Notice that you are just assigning a function to the onsuccess property, you are not executing the function. It could be executed seconds later.
request.onsuccess是一个回调函数，在异步请求完成时将被调用。请注意，您只是将函数分配给onsuccess属性，而不是执行该函数。它可以在几秒钟后执行。
The code following it will continue to be executed after it has been defined, so console.log(years[0]) will be called immediately after which is why it prints out "undefined" since the callback method hasn't been executed yet. All of your code that deals with "years" should go inside the callback.
其后的代码将在定义之后继续执行，因此将立即调用console.log（years [0]），之后它将打印出“undefined”，因为回调方法尚未执行。处理“年”的所有代码都应该放在回调中。
If you don't want to shove all of your code inside the callback, just define another method and call it from within the callback method.
如果您不想在回调中推送所有代码，只需定义另一个方法并在回调方法中调用它。
function handleRequest(evt) {
var cursor = evt.target.result;
if (cursor) {
var matchList = cursor.value;
// the value of the key year is pushed into the array years
years.push(matchList.year);
console.log(years[0]); // this works
cursor.continue();
}
}
var request = index.openCursor(range);
request.onsuccess = function(evt) {
handleRequest(evt);
}
}
#1
1
request.onsuccess is a callback function that will get called when the asynchronous request has completed. Notice that you are just assigning a function to the onsuccess property, you are not executing the function. It could be executed seconds later.
request.onsuccess是一个回调函数，在异步请求完成时将被调用。请注意，您只是将函数分配给onsuccess属性，而不是执行该函数。它可以在几秒钟后执行。
The code following it will continue to be executed after it has been defined, so console.log(years[0]) will be called immediately after which is why it prints out "undefined" since the callback method hasn't been executed yet. All of your code that deals with "years" should go inside the callback.
其后的代码将在定义之后继续执行，因此将立即调用console.log（years [0]），之后它将打印出“undefined”，因为回调方法尚未执行。处理“年”的所有代码都应该放在回调中。
If you don't want to shove all of your code inside the callback, just define another method and call it from within the callback method.
如果您不想在回调中推送所有代码，只需定义另一个方法并在回调方法中调用它。
function handleRequest(evt) {
var cursor = evt.target.result;
if (cursor) {
var matchList = cursor.value;
// the value of the key year is pushed into the array years
years.push(matchList.year);
console.log(years[0]); // this works
cursor.continue();
}
}
var request = index.openCursor(range);
request.onsuccess = function(evt) {
handleRequest(evt);
}
}