JavascriptでsetTimeoutを使いたい

Question

JavascriptでsetTimeoutを使いたい

クリックすると数秒後に関数が実行され、その秒数が立つ前にもう一度クリックすると関数がキャンセルされるようなコードを作りたいです。

if (bool) {
    const timer = setTimeout(func, time);
} else {
    clearTimeout(timer);
}

（boolにはクリックするごとにtrueとfalseが反転しながら入ります。）
このコードはスコープの問題でうまく動きませんでした。

スコープの問題を解決した以下のコードを試してみましたが、うまく動きません。

let timer;
if (bool) {
    timer = setTimeout(func, time);
} else {
    clearTimeout(timer);
}

どうすれば実装できますか。プログラミング初心者なので教えていただけると嬉しいです。

Comments

[ku__ra__ge]

> うまく動きません。
どのような操作をしたとき、どのような動作を想定したが、実際にはどのような動作になりエラー等が出るならそれはどのような内容なのか……を書きましょう。
また実際に問題が再現できるコードを提示しましょう。
あなたが提示したコードを利用して「クリックすると数秒後に関数が実行され、その秒数が立つ前にもう一度クリックすると関数がキャンセルされる」プログラムを動作させることは可能なので、提示されていない部分に問題があると思われます。

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  let bool=true;
  let timer;
  const time=2000;
  const func=()=>{
    console.log("実行");
    bool=true;
  }
  btn.addEventListener('click',()=>{
    if(bool){
      timer = setTimeout(func, time);
    } else {
      clearTimeout(timer);
    }
    bool=!bool;
    console.log(bool);
  });
});
</script>

<input type="button" id="btn" value="btn">