新年新しいことを初めようということで、話題のN予備校プログラミングコース頑張っていこうと思います。
ハマったポイントなど忘備録として。
#今回の要件
Javascriptを使って、以下の機能を実装する
・画面表示時、ダイアログを表示する
・ダイアログで「はい」を選択した後、時間を測り始める
・キーボードを押した時点で、「はい」を押してからの時間を画面に表示する
#困った点
ダイアログで「はい」を選択した後、キーボードを押す前に「０秒」と表示されてしまう。
//HTMLで表示する部分を指定
const displayArea = document.getElementById('display-area');
//関数定義部分
const startTimer = () => {
return Date.now();
}
const stopTimer = (startTime) => {
const currentTime = Date.now();
const seconds = (currentTime - startTime) / 1000;
displayArea.innerText = seconds + '秒でした。';
}
//実行部分
if(confirm('何かキーを押して下さい')){
const startTime = startTimer();
//原因部分
document.addEventListener('keydown',stopTimer(startTime),false);
}
#原因
イベントを定義する関数に「()」をつけていた。
//原因部分
document.addEventListener('keydown',stopTimer(startTime),false);
関数名（）とすると「イベント時に呼ぶ関数を設定する」ではなく「その関数を実行する」と判断されてしまうことから、キーボードを押してすぐ「0秒」と表示されていた。
したがって、以下のようにするとstopTimer関数がイベント時に呼ばれるようになる。
document.addEventListener('keydown',stopTimer,false);
しかし、今回はstopTimer関数に引数を渡したい。
#解決方法
「引数を取らない関数」を設定し、その中でstopTimer関数を呼び出す。
document.addEventListener('keydown', ()=>{stopTimer(startTime)},false);
以下でも動くはず。
document.addEventListener('keydown', function(){stopTimer(startTime)},false);
#感想
イベントに関数を設定する際、設定する関数に引数を渡そうとして同じことで悩む未来が見えます。
頭の片隅に置いておこうと思いました。