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を使い、デバイス幅によって条件分岐する方法【jQuery不要】

2022.10.20
466
JavaScript

HTMLのformでsubmitした時、ページ遷移させない方法【JavaScript】

2022.10.09
915
JavaScript

JavaScriptで配列とオブジェクトを比較。重複した値を持つ要素だけ取得する方法

2022.12.24
393
JavaScript

JavaScriptの配列で条件一致する要素だけ抽出する方法【filterメソッドを使おう】

2023.01.04
376