IndexedDB how to ensure IDBOpenDBRequest.onupgradeneeded is added before event occurs
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
Several IndexedDB documentation tells the following sequence for initializing a DB and creating one ObjectStore.
1) request = window.indexedDB.open(...)
2) request.onsuccess = ...;
3) request.onupgradeneeded = ...
However I found that if step (3) is done after a while it doesn't get executed.
Here is the test code:
var db;
var request = window.indexedDB.open("birds-db", 1);
const startTime = new Date().getTime();
const simulatedDelay = 300;
function deltaTime() {
return new Date().getTime() - startTime;
}
request.onerror = function(event) {
console.log('error: ' + event);
};
request.onsuccess = function(event) {
console.log('onsuccess was called T' + deltaTime());
db = event.target.result;
};
setTimeout(function() {
console.log('after waiting ' + simulatedDelay + " miliseconds T" + deltaTime());
request.onupgradeneeded = function(event) {
console.log('onupgradeneeded was called T' + deltaTime());
var db = event.target.result;
var objectStore = db.createObjectStore("birds", {
keyPath: "sci_name"
});
};
}, simulatedDelay);
console.log("end " + deltaTime());
In sample above if simulatedDelay is set to 300 milliseconds things go well most of times, showing something like:
end 1
after waiting 300 miliseconds T302
onupgradeneeded was called T474
onsuccess was called T479
But setting it to 2000 or more will result on:
end 0
onsuccess was called T602
after waiting 2000 miliseconds T2001
And "onupgradeneeded" is not called at all. My browser is Firefox 60.
Of course if I set "onupgradeneeded" just after "open" the issue doesn't occurs.
How can I be sure in more complex situations that onupgradeneeded is always set before event occurs?
javascript indexeddb
add a comment |
Several IndexedDB documentation tells the following sequence for initializing a DB and creating one ObjectStore.
1) request = window.indexedDB.open(...)
2) request.onsuccess = ...;
3) request.onupgradeneeded = ...
However I found that if step (3) is done after a while it doesn't get executed.
Here is the test code:
var db;
var request = window.indexedDB.open("birds-db", 1);
const startTime = new Date().getTime();
const simulatedDelay = 300;
function deltaTime() {
return new Date().getTime() - startTime;
}
request.onerror = function(event) {
console.log('error: ' + event);
};
request.onsuccess = function(event) {
console.log('onsuccess was called T' + deltaTime());
db = event.target.result;
};
setTimeout(function() {
console.log('after waiting ' + simulatedDelay + " miliseconds T" + deltaTime());
request.onupgradeneeded = function(event) {
console.log('onupgradeneeded was called T' + deltaTime());
var db = event.target.result;
var objectStore = db.createObjectStore("birds", {
keyPath: "sci_name"
});
};
}, simulatedDelay);
console.log("end " + deltaTime());
In sample above if simulatedDelay is set to 300 milliseconds things go well most of times, showing something like:
end 1
after waiting 300 miliseconds T302
onupgradeneeded was called T474
onsuccess was called T479
But setting it to 2000 or more will result on:
end 0
onsuccess was called T602
after waiting 2000 miliseconds T2001
And "onupgradeneeded" is not called at all. My browser is Firefox 60.
Of course if I set "onupgradeneeded" just after "open" the issue doesn't occurs.
How can I be sure in more complex situations that onupgradeneeded is always set before event occurs?
javascript indexeddb
I would suggest learning more about how to read and write asynchronous Javascript
– Josh
Nov 27 '18 at 14:19
add a comment |
Several IndexedDB documentation tells the following sequence for initializing a DB and creating one ObjectStore.
1) request = window.indexedDB.open(...)
2) request.onsuccess = ...;
3) request.onupgradeneeded = ...
However I found that if step (3) is done after a while it doesn't get executed.
Here is the test code:
var db;
var request = window.indexedDB.open("birds-db", 1);
const startTime = new Date().getTime();
const simulatedDelay = 300;
function deltaTime() {
return new Date().getTime() - startTime;
}
request.onerror = function(event) {
console.log('error: ' + event);
};
request.onsuccess = function(event) {
console.log('onsuccess was called T' + deltaTime());
db = event.target.result;
};
setTimeout(function() {
console.log('after waiting ' + simulatedDelay + " miliseconds T" + deltaTime());
request.onupgradeneeded = function(event) {
console.log('onupgradeneeded was called T' + deltaTime());
var db = event.target.result;
var objectStore = db.createObjectStore("birds", {
keyPath: "sci_name"
});
};
}, simulatedDelay);
console.log("end " + deltaTime());
In sample above if simulatedDelay is set to 300 milliseconds things go well most of times, showing something like:
end 1
after waiting 300 miliseconds T302
onupgradeneeded was called T474
onsuccess was called T479
But setting it to 2000 or more will result on:
end 0
onsuccess was called T602
after waiting 2000 miliseconds T2001
And "onupgradeneeded" is not called at all. My browser is Firefox 60.
Of course if I set "onupgradeneeded" just after "open" the issue doesn't occurs.
How can I be sure in more complex situations that onupgradeneeded is always set before event occurs?
javascript indexeddb
Several IndexedDB documentation tells the following sequence for initializing a DB and creating one ObjectStore.
1) request = window.indexedDB.open(...)
2) request.onsuccess = ...;
3) request.onupgradeneeded = ...
However I found that if step (3) is done after a while it doesn't get executed.
Here is the test code:
var db;
var request = window.indexedDB.open("birds-db", 1);
const startTime = new Date().getTime();
const simulatedDelay = 300;
function deltaTime() {
return new Date().getTime() - startTime;
}
request.onerror = function(event) {
console.log('error: ' + event);
};
request.onsuccess = function(event) {
console.log('onsuccess was called T' + deltaTime());
db = event.target.result;
};
setTimeout(function() {
console.log('after waiting ' + simulatedDelay + " miliseconds T" + deltaTime());
request.onupgradeneeded = function(event) {
console.log('onupgradeneeded was called T' + deltaTime());
var db = event.target.result;
var objectStore = db.createObjectStore("birds", {
keyPath: "sci_name"
});
};
}, simulatedDelay);
console.log("end " + deltaTime());
In sample above if simulatedDelay is set to 300 milliseconds things go well most of times, showing something like:
end 1
after waiting 300 miliseconds T302
onupgradeneeded was called T474
onsuccess was called T479
But setting it to 2000 or more will result on:
end 0
onsuccess was called T602
after waiting 2000 miliseconds T2001
And "onupgradeneeded" is not called at all. My browser is Firefox 60.
Of course if I set "onupgradeneeded" just after "open" the issue doesn't occurs.
How can I be sure in more complex situations that onupgradeneeded is always set before event occurs?
javascript indexeddb
javascript indexeddb
asked Nov 26 '18 at 23:49
GuishGuish
384
384
I would suggest learning more about how to read and write asynchronous Javascript
– Josh
Nov 27 '18 at 14:19
add a comment |
I would suggest learning more about how to read and write asynchronous Javascript
– Josh
Nov 27 '18 at 14:19
I would suggest learning more about how to read and write asynchronous Javascript
– Josh
Nov 27 '18 at 14:19
I would suggest learning more about how to read and write asynchronous Javascript
– Josh
Nov 27 '18 at 14:19
add a comment |
1 Answer
1
active
oldest
votes
Unless you synchronously set the event handlers, it's a race condition. If the event handler is set before the event fires, the callback function. Otherwise, not.
In practice, you should always set these event handlers synchronously, because race conditions are very confusing.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490788%2findexeddb-how-to-ensure-idbopendbrequest-onupgradeneeded-is-added-before-event-o%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Unless you synchronously set the event handlers, it's a race condition. If the event handler is set before the event fires, the callback function. Otherwise, not.
In practice, you should always set these event handlers synchronously, because race conditions are very confusing.
add a comment |
Unless you synchronously set the event handlers, it's a race condition. If the event handler is set before the event fires, the callback function. Otherwise, not.
In practice, you should always set these event handlers synchronously, because race conditions are very confusing.
add a comment |
Unless you synchronously set the event handlers, it's a race condition. If the event handler is set before the event fires, the callback function. Otherwise, not.
In practice, you should always set these event handlers synchronously, because race conditions are very confusing.
Unless you synchronously set the event handlers, it's a race condition. If the event handler is set before the event fires, the callback function. Otherwise, not.
In practice, you should always set these event handlers synchronously, because race conditions are very confusing.
answered Nov 27 '18 at 5:41
dumbmatterdumbmatter
5,27542662
5,27542662
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490788%2findexeddb-how-to-ensure-idbopendbrequest-onupgradeneeded-is-added-before-event-o%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I would suggest learning more about how to read and write asynchronous Javascript
– Josh
Nov 27 '18 at 14:19