JavaScriptでのタイマー起動のための複数回ボタンクリック
私が上に示したコードは、実際にはいくつかの問題を抱えています。この問題は、私たちのボタンが複数回クリックされた場合に現れます。この場合、各クリックは新しいタイマーの起動につながります。
つまり、例えばボタンを3回押すと、3つのタイマーが起動し、これらの各タイマーはカウンターの値をコンソールに出力します。これは、値が3倍の速さで変化することを意味します!
上記の問題を解決するには、ボタンの再クリックが新しいタイマーの起動につながらないようにするだけです。例えば、タイマー起動後にボタンからバインドされたクリックハンドラーを外すことができます:
let start = document.querySelector('#start');
start.addEventListener('click', function func() {
let i = 0;
setInterval(function() {
console.log(++i);
}, 1000);
this.removeEventListener('click', func); // ハンドラーを解除
});
前の課題の解答を取ってください。ボタンの複数回クリックがカウントを加速させることを確認してください。この問題を修正してください。