JSのSetTimeoutを解除する

.clearTimeout() | JavaScript 日本語リファレンス | js STUDIO に記載されてる通りなんですけど、実装時にちょっとハマったので備忘録。

// timer起動
const timer = setTimeout(() => { /* hogehoge */ }, "1000");
timer();

// timer解除
clearTimeout(timer);

これでsetTimeoutで設定したTimerを解除できるものかと思っていましたが、 timer() とした時点で timeoutIDを返り値に取らなくなってしまい、clearTimeout をしても解除できません。
(Frontend力のなさを痛感しました。。。)

SetTimeoutは変数の中に定義した時点で実行されてTimer登録されます。そのため

const timer = setTimeout(() => { /* hogehoge */ }, "1000");

この時点でsetTimeoutは実行されてTimerがセットされます。 SetTimeout は返り値に timeoutID が入ってくるので、SetTimeout を解除する clearTimeout(timeoutID) の引数にはTimerを設定した時の返り値の timeoutID を指定することでTimerを解除することができます。