javascriptでsetTimeoutがclearTimeoutで止まらないです。

Question

前提・実現したいこと

Discordでゲームのスタミナがマックスなことを教えてくれるbotをjavascriptで作成してみようと思い作り始めて見たのですが、完成したはいいもののキャンセル機能がなく不便に感じキャンセル機能もつけてみようと思いつけてみようと思いました。
そこでタイマーをsetTimeoutで時間を計算してメッセージを送るようにしてたので、clearTimeoutを使いキャンセルしようと思い書いてみたのですが、止まらず通知してしまいます。
なぜ止まらないのでしょうか？

読みにくいコードですがご教授いただけると幸いです。

該当のソースコード

const Discord = require('discord.js');

const { prefix, token } = require('./config.json');
const client = new Discord.Client();

client.on('ready', () => {
  console.log(`${client.user.username} でログインしています。`);
})

client.on('message', async msg => {
  var jushimax=160*8;
  var jushi=0,nokorih=0,nokorim=0;
  var time=((jushimax-(jushi*8))-80)*60*1000;
  var jushiTimer

  if(!msg.content.startsWith(prefix) || msg.author.bot) return;
  
  const args=msg.content.slice(prefix.length).split(' ');
  const command=args.shift().toLowerCase();
  
  if (msg.content === `${prefix}hello`) {
    msg.channel.send(`${msg.author}!\nこんにちは、よろしくね。`);
  }else if(msg.content === `${prefix}server`) {
    msg.channel.send(`サーバー名:${msg.guild.name}\n人数:${msg.guild.memberCount}`);
  }
//ここから教えてくれるコマンドのコードです。
   else if(command === 'jushi'){
    if (!args.length){
      return msg.channel.send(`${msg.author}!、樹脂を !jushi 160 のように書いてください。`);
    }

    jushi=args[0];
    nokorih=Math.floor((jushimax-(jushi*8))/60);
    nokorim=(jushimax-(jushi*8))%60;
    

    if(0<=args[0] && args[0]<=160){
      msg.channel.send(`今、${msg.author}の樹脂は${args[0]}です。\n残り${nokorih}時間${nokorim}分で樹脂が全回復です。`);
    }else{
      msg.channel.send('樹脂の入力は0~160まででお願いします…');
    }  
    
    if(args[0]<150){
        jushiTimer=setTimeout(function(){
        msg.channel.send(`今、${msg.author}の樹脂は150です。\n残り1時間20分で樹脂が全回復してしまいます。`);
      },10000)
    }
  }else if(msg.content === `${prefix}timerc`){
      clearTimeout(jushiTimer);
      msg.channel.send(`${msg.author}さんの樹脂タイマーをキャンセルしました。`);
  }
})

client.login(token);

試したこと

・初心者なのでなにをしたらいいかわからず手をつけられていません。

補足情報（FW/ツールのバージョンなど）

・スタミナ=樹脂

Comments

[m.ts10806]

様々な分岐があるようですがclearTimeoutのあるブロックは確実に通ってるのでしょうか

[ku__ra__ge]

まず問題を切り分けましょう。10秒ごとにconsole.logでログを出力し、ボタンを押すとそれを止めるというだけの機能のプログラムを作ってみて、本当に問題はclearTimeoutにあるのか確かめましょう。

Answer 1

中にざっくり説明書きました。
(1/10 19:47 編集)　簡単な内容に書き換えました

※javascriptの変数のライフサイクル、スコープについて勉強する場合、クロージャというキーワードで検索して勉強してみてください。

client.on('ready', () => {
    console.log('ready...');
});

// ↓のtmが 「client.on('message', message => { ... });」の外にある事が重要。
// setTimeoutしている部分は、内部関数を10秒後に実行するように設定して、そのまま先に進み、
// イベント関数は終了します。その時点で、イベント関数内で定義された変数は消えてしまうため、
// tmは外のグローバルな位置に定義しておきます。cancel呼び出し時に見るためです。
let tm;
client.on('message', message => {
    if (message.author.bot) {
        return;
    }

    if (message.content === 'start') {
        tm = setTimeout(function(){
            message.channel.send('10秒経ったよ')
        }, 10000)
    } else if (message.content === 'cancel') {
        clearTimeout(tm)
        message.channel.send('やめ')
    }
});
client.login(token);

Comments

[jam79iy]

回答ありがとうございます。
とても内容がわかりやすかったです。

質問があります。
的を得ていない可能性がありますがご容赦ください。
今回のtmという変数はなぜグローバル変数でないといけないのでしょうか？
ローカル変数では関数はtmを見れないんですか？

[umau]

少し難しい所なので、上手く伝わるか分からないですが、、

ローカル変数は、関数が終了すると、基本的にメモリから削除されます。

1, メッセージstartを受信し、「message => { ... }」関数が始まる。
2, 「message.content === 'start'」 の分岐に入り、tm にsetTimeoutを止めるためのキーが設定される
3, else if (message.content === 'cancel') には入らず、そのまま関数は終了する。← もし、tmがローカル変数だった場合、ここでメモリから消えて無くなる。
4, 10秒以内にメッセージcancelを受信したとします。またイベント関数が呼ばれて新しく始まる。
5, 今度は「message.content === 'cancel'」の分岐に入り、clearTimeoutを呼びますが、tmは残っていないので止まらない。

メッセージを受信するたびに、「message => { ... }」が新たに開始され、まっさらな状態から始まるので、前回の呼び出しの際に取得した値を使いたい場合、それをどうやって受け取るか、と言うのがポイントになります。

回答した例では、グローバルな位置に定義することで、「message => { ... }」が終了しても消されないようにしているという事です。

[jam79iy]

なるほど
とてもわかりやすかったです。スッキリしました。

cancelを受信したときはまた新しく「message => { ... }」関数が呼び出されるという発想がありませんでした。
なのでローカル変数でもできると勘違いしていました。

わかりやすい回答、質問への返答ありがとうございました。