JavaScriptでfunctionの関数や様々な処理等を“何秒後”に実行、といった指定をする時に使う「setTimeout」。

jQueryでもこの指定を使うことが出来るのですが、必要な時に限って記述方法を忘れてしまっていることが多いので、ここにメモ書きしておきます。(ごく単純な記述なのですが…)

jQueryでsetTimeout

$(function(){
	setTimeout(function(){
		~ここに処理を記載~
	},1000);
});

処理を記載する箇所の後ろにある数値は、“何秒後”に処理させるか、の値になります。

例えば、ページを読み込んだ後、3秒後にbodyをフェードインさせる場合。(フェードインするアニメーション時間は1秒)

$(function(){
	$("body").css({opacity:'0'});
	setTimeout(function(){
		$("body").stop().animate({opacity:'1'},1000);
	},3000);
});

こんな感じの書き方で実現できます。

この「setTimeout」を使った遅延処理はいろいろな使い方ができて、アニメーションを使った演出を加える際などで何かと便利になったりします。

ご参考までに。。。

SHARE

Comments (8)

  • jQueryでアニメーション処理(「.animate()」)完了後に別の処理を実行させる方法 | BlackFlag | 2011.04.06 17:18

    […] 先日の遅延処理「jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法」と合わせることで 様々なタイミングでアニメーションを制御することが可能になったりもします。 […]

  • 山本 恭子 | 2013.07.30 16:08

    初めまして。setTimeoutを調べていて拝見させいただいているのですが
    setTimeoutを「3回や5回など数回繰り返して止める」ことはできないでしょうか?

    色々調べているのですがなかなかうまくいかずお手上げでございます。

    下記にコードを記載しております。
    ご教授いただければと助かります。
    ——————————————————————————–
    $(function(){
    setTimeout(function(){
    $(“#hoge”).animate({bottom:’-=’ + ’83’ + ‘px’},1000);
    },3000);
    });
    ——————————————————————————–
    ※上記の処理を回数制限して止めたいのです。
    setIntervalも試しましたが、スクリプトがいつまでも実行されてしまって、#hogeがずっと上にあがってしまいます。。

  • BlackFlag | 2013.08.02 0:51

    >山本恭子さん
    コメントありがとうございます。

    setTimeoutは基本的には繰り返し処理ではないので
    やろうとするとsetIntervalと併用するか
    $.eachを使用する方法になるかと思っております。

    $.eachの回数制限処理については
    —————————————–
    ・jQueryで指定回数ループ | かんたん★javascript
    http://kaathemachine.com/javascript/2009/12/03/jquery%E3%81%A7%E6%8C%87%E5%AE%9A%E5%9B%9E%E6%95%B0%E3%83%AB%E3%83%BC%E3%83%97/
    —————————————–
    こちらの記事がとても参考になるかと思います。

    setTimeoutとsetIntervalを使って強引にやろうとするならば
    —————————————–
    $(function(){
    function timer(){
    setTimer = setInterval(function(){
    $(“#hoge”).animate({bottom:’-=’ + ’83’ + ‘px’},1000);
    },3000);
    }
    timer();
    setTimeout(function(){
    clearInterval(setTimer);
    },9500); // 3回でストップ
    });
    —————————————–
    こんな感じになるかと思います。
    3秒繰り返し処理を9.5秒後にストップさせているので
    5回でストップさせる場合は「9500」のところを
    「15500」とすることで可能になるのではないかと思っております。

    お試しください。
    よろしくお願いします。

  • サイドバーの自動追尾をやっとこ完成させる | Webデザイン | 正貢堂 パティスリーショウコウドウ | 2014.02.15 3:02

    […] jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法 | BlackFlag […]

  • これ結構使えた!サービスサイトやWordPressテーマで使われている小技まとめ | コムテブログ | 2014.05.19 8:32

    […] jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法 | BlackFlag […]

  • rit | 2014.10.29 17:18

    ずいぶん前の物にコメントしていいのか悩みますが

    (function (){
    //処理回数のカウント用変数
    var Count=0;
    function funcA(){
    //funcAの循環参照の解除
    if(Count==3){
    clearTimeout(SI);
    return “”;
    }

    //何かしらの処理
    console.log(“A”);

    //処理回数カウント
    Count++;

    //setTimeoutで関数自体を呼び出す(再帰呼び出し)
    var SI=setTimeout(funcA,500);
    return this;
    }

    setTimeout(funcA,500);
    return “”;
    }());

    のように再帰で実装することにより指定回数の処理の実行が可能になると思いますがどうでしょうか?

  • BlackFlag | 2014.11.02 1:06

    >ritさん
    コメントありがとうございます。
    今後の参考にさせて頂きます。

  • [jQuery] 数秒後に処理する方法 | Web Creater's Blog | 2014.12.21 17:54

    […] 参考記事:jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法 カテゴリー: jQuery | タグ: jQuery | 投稿日: 2014-01-24 | 投稿者: combi […]







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して