[javascript]addEventListener()関数にセットした引数について

下記のコードは、addEventListener() メソッドを使って、パソコンキーボードの[F]のキーを押したら、indexedDBのデータベースに、データが挿入されるようにしようとしています。

しかし、データベース用に定義した、関数のDateInsert()が、コメントアウトの(1)の箇所では、しっかりと動いており、Chromeブラウザで確認しても、データが挿入されている一方で、
(2)の場所に置くと全く動きません。(2)の箇所でデータを挿入したいので、この場所で動かすには、どのような解決方法がありますでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body>

<script>
(function() {
'use strict';

//データベースとストア作成
var dbName ='Test';
var storeName ='SampleDate';
var db;
var indexedDB = window.indexedDB || window.mozIndexedDB || window.msIndexedDB;
var openRequest = indexedDB.open(dbName, 1.0);

  openRequest.onupgradeneeded = function(e) {
    db = e.target.result;
    db.createObjectStore(storeName, { keyPath: 'id'});
  }

//挿入用データ
var data = {id : '10300', time : 'Hello World!'};

//データ挿入の為の関数
function DateInsert(){
 openRequest.onsuccess = function(e){
    db = e.target.result;
    var putReq = db.transaction(storeName, 'readwrite').objectStore(storeName).put(data);
 }
}

//DateInsert(); //(1)動く

window.addEventListener('keydown', function(e) {
 if(70 == e.keyCode){  //F key
  alert();
   DateInsert();  //(2)動かない
  }
});

})();
</script>

</body>
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

DateInsert()内で行われている処理は、onsuccessイベントに処理成功時のハンドラをセットするというものです。

(1)のタイミングでは.openと同期的にセットしているので、この時点でonsuccessが実行されていることはなく、処理は間に合うのですが、(2)でセットしようとすると、keydownイベントが発生するのは、ほぼ確実にonsuccessが発生した後になってしまうので、そこでセットしても後の祭りです。

投稿2019/07/06 12:53

maisumakun

総合スコア145183

xjaPANDA

2019/07/06 14:13

ありがとうございます。構造に問題があったようで、アドバイスにより解決することができました。

行動規範の内容に同意します

openRequest.onsuccess = function(ev){

window.addEventListener('keydown', function(e) {
 if(70 == e.keyCode){  //F key
    db = ev.target.result;
    var putReq = db.transaction(storeName, 'readwrite').objectStore(storeName).put(data);
  }
});

 }

投稿2019/07/06 14:13

xjaPANDA

総合スコア124