JavaScriptでのタイマー起動のための複数回ボタンクリック

私が上に示したコードは、実際にはいくつかの問題を抱えています。この問題は、私たちのボタンが複数回クリックされた場合に現れます。この場合、各クリックは新しいタイマーの起動につながります。

つまり、例えばボタンを3回押すと、3つのタイマーが起動し、これらの各タイマーはカウンターの値をコンソールに出力します。これは、値が3倍の速さで変化することを意味します！

上記の問題を解決するには、ボタンの再クリックが新しいタイマーの起動につながらないようにするだけです。例えば、タイマー起動後にボタンからバインドされたクリックハンドラーを外すことができます：

javascriptlet start = document.querySelector('#start');

start.addEventListener('click', function func() {
  let i = 0;
  
  setInterval(function() {
    console.log(++i);
  }, 1000);
  
  this.removeEventListener('click', func); // ハンドラーを解除
});