Written by Kasumi

【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が効かないよくあるパターンの対処方法について紹介しました。

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

目次

関連記事

JavaScript

JavaScriptで並列要素の高さを揃える方法【自動調整】

2022.12.25
4632
JavaScript

JavaScriptでスクロールしたら要素をアニメーション表示する方法【Intersection Observer APIが便利】

2022.09.08
4390
JavaScript

【JavaScript】コンストラクター関数を使ってオブジェクトの雛形を作成・インスタンス化する方法

2022.12.12
631
JavaScript

【JavaScript】for…inとfor…ofの用途・違いについて

2022.12.28
739