setTimeoutでタイマー指定した関数をキャンセルする方法!

JavaScriptのsetTimeout()で指定した関数をタイマー設定した後に、やっぱり関数の実行をキャンセルする方法についてサンプルコード付きで解説します。

コンテンツ [表示]

  1. 1JavaScriptでsetTimeoutでタイマー指定した関数の実行をキャンセルする方法

JavaScriptのsetTimeout()は引数で指定した関数を指定した時間後に遅延実行させるメソッドです。

例えば指定した関数を100ミリ秒後に実行したい、あるいは3秒後に実行したいなど「今ではなく、少し後に実行したい」というタイマー処理をしたい場合にはsetTimeout()を使うことで実現出来ます。

例えば下記のサンプルコードでは、1秒後にテキストを表示する関数をsetTimeout()でタイマー設定して実現しています。

一方でsetTimeout()で指定した関数をタイマー設定したはいいが、後になって「やっぱりキャンセルしたい」といったケースもあります。

今回はsetTimeoutでタイマー指定した関数の実行をキャンセルする方法をサンプルコード付きで解説していきます。

JavaScriptでsetTimeoutでタイマー指定した関数の実行をキャンセルする方法

setTimeout()を一度設定して、その後に関数の実行をキャンセルするためにはsetTimeout()の戻り値を利用します。

setTimeout()の戻り値は正の整数値で、この整数値をclearTimeout()に引数で渡して実行することで、タイマー設定されている関数の実行をキャンセルすることが出来ます。

では実際に試してみましょう。下記のサンプルコードを見てみましょう。

上記のサンプルコードではsetTimeout()の引数に指定されたshowText()の関数が実行されません。

setTimeout()の戻り値を変数timeIdに格納し、その変数をclearTimeout()に渡すことで関数の実行をキャンセルすることが出来ます。

GeekHive採用サイト

関連記事