javascript - IndexedDB 如何确保在事件发生之前添加 IDBOpenDBRequest.onupgradeneeded

Question

多个 IndexedDB 文档讲述了以下初始化数据库和创建一个 ObjectStore 的顺序。

1) request = window.indexedDB.open(...)
2) request.onsuccess = ...;
3) request.onupgradeneeded = ...

但是我发现如果步骤(3)在一段时间后完成，它不会被执行。

这是测试代码:

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());

在上面的示例中，如果将 SimulatedDelay 设置为 300 毫秒，大多数情况下一切都会顺利进行，显示如下:

end 1
after waiting  300 miliseconds T302
onupgradeneeded was called T474 
onsuccess was called T479

但是将其设置为 2000 或更多会导致:

end 0
onsuccess was called T602
after waiting  2000 miliseconds T2001

并且“onupgradeneeded”根本没有被调用。我的浏览器是 Firefox 60。

当然，如果我在“打开”之后设置“onupgradeneeded”，则不会出现问题。

在更复杂的情况下，如何确保 onupgradeneeded 始终在事件发生之前设置？

Answer 1

除非您同步设置事件处理程序，否则这是一个竞争条件。如果在事件触发之前设置了事件处理程序，则回调函数。否则，不会。

在实践中，您应该始终同步设置这些事件处理程序，因为竞争条件非常令人困惑。