はじめに

本記事では、一定時間後に処理を実行する方法を記載します。

ボタン押下したX秒後に処理を行うなどの場合に使用することができます。

一定時間後に処理

以下が、サンプルボタンです。

押下する事で、5秒後にダイアログが表示されます。

5秒後にダイアログ表示

上記のサンプルボタンのソースコードは以下です。

<button type="button" onclick="timeout()">5秒後にダイアログ表示</button>

<script>
function timeout() {
    var fn = function() {
        window.alert("5秒経過");
    };
    var tm = 5000;
    setTimeout(fn,tm);
}
</script>

以下のように記載することで、きれいに記載が出来ます。

<button type="button" onclick="timeout()">5秒後にダイアログ表示</button>

<script>
function timeout() {
    setTimeout(() => {
        window.alert("5秒経過");
    },5000);
}
</script>