JavaScriptのsetTimeOut関数には戻り値があるよって言う話

色々調べてみると、JavaScriptのsetTimeOut関数には戻り値があることが分かったのでメモをしておきます。

setTimeOutの戻り値とは

WindowOrWorkerGlobalScope.setTimeout() | MDN」の記事によると、setTimeOut()の戻り値はタイマーを識別する正の整数と分かります。

戻り値 timeoutID は、setTimeout() を呼び出して作成したタイマーを識別する正の整数値です。この値は、タイムアウトをキャンセルするために clearTimeout() へ渡すことができます。

上記の引用文の様に、戻り値timeoutIDをタイムアウトをキャンセルするclearTimeOut()関数に渡すことでタイマーをキャンセルできる。

具体的な使い道

つまり、setTimeOut関数を使うことで、単に「何秒後に関数を呼び出す」と言う使い方以外に「何秒間何もしなければ関数を呼び出す」と言う使い方も可能と言うわけだ。

具体的には以下のコードが挙げられる。

let timeOutId;
function CheckTime() {
if ( timeOutId != null) {
clearTimeOut(timeOutId);
}
timeOutId = setTimeOut(  fooFunc, 1000);
}
hogeDom.addEventListener('click', CheckTime, false);

上記のコードではhogeDomをクリックして、もし1秒間(1000ms)再度クリックしなければfooFunc関数を呼び出すという動きをしてくれる。

ReratedPosts

Nuxt.jsでnpm run devをした時に「SyntaxError: Invalid regular expression flags」というエラーが出た時の対処法
JavaScriptで配列の要素やハッシュ(連想配列)のバリューを変数に変換する方法
JavaScriptのクロージャについて理解したのでまとめ
javaScriptにおけるfromCharCode()とcharCodeAt()の使い方
素のJavaScriptでappend,prepend,after,beforeが実装されていたので紹介する
JavaScriptでファイルダウンロードを実現するための5ステップ