• JavaScript

【JavaScript】setTimeoutが効かない。よくあるパターンの対処方法

setTimeoutメソッドを使って遅延読み込みさせたいが機能しない。

コンソールにエラーも出ない事から原因がわからない。

本記事ではこのような悩みを解決。

実装方法について解説します。

setTimeoutメソッドの使い方

まずおさらいで、setTimoutメソッドの使い方は以下の通りです。

setTimeout(実行処理, 実行タイミングミリ秒で指定);

第一引数に実行したい処理。

第二引数に実行するタイミングをミリ秒で指定します。

setTimeoutが効かないよくある例

function fn() {
  console.log("hello");
}

setTimeout(fn(),2000);

setTimeoutが効かないよくあるコード例です。

fn関数をsetTimeoutを使ってコンソールへ2秒後にhelloと出力したいのですが、すぐ実行されてしまいます。

原因はsetTimeoutの第一引数にそのまま実行関数()を記述してる事にあります。

上記が理由で、setTimeoutで遅延処理を実行する前に関数が実行されてしまいます。

対処方法

function fn() {
  console.log("hello");
}

setTimeout(function(){fn()},2000);

setTimeoutの第一引数にはコールバック関数を与える事ができます。

実行したい処理を関数で囲う事で、setTimeoutが機能するようになります。

まとめ

JavaScriptでsetTimeoutが効かないよくあるパターンの対処方法について紹介しました。

以上で解説を終わります。