[JavaScript]setTimeout待機中に同じ処理が行われた場合、前の処理を中断する

例えば「押されたら1秒後にアラートを表示するボタン」をアラートが表示される前に3回押すと、全ての処理が継続されアラートが3回表示されます。
これを待機中に押された場合はそれまでの処理を中断し、最後に押されてから1秒後にアラートを表示する方法です。

サンプル

JavaScript

let timeout;
document.getElementById('btn2').addEventListener('click', () => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
        alert('最後にボタンが押されてから1秒経過！');
    }, 1000);
});

内容によって上記を書き換えていきます。

let timeout;

最初に好きな変数を準備。

document.getElementById('btn2').addEventListener('click', () => {
});

setTimeoutを呼び出す処理なので、ここは自由な処理に変更。
（今回はボタンクリックで開始。）

clearTimeout(timeout);

上記で設定した変数を指定。

timeout = setTimeout(() => {
    alert('1秒経過！');
}, 1000);

上記で設定した変数に対してsetTimeoutを設定する。

簡単な解説

処理が始まると最初にclearTimeoutが走るため、setTimeout待機中の場合にはこれまでの処理が中断され最後のsetTimeoutのみが残ります。
最初にclearTimeoutを走らせるために、事前に変数を指定しておかないとエラーになります。