jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法
http://black-flag.net/jquery/20110405-2878.html
BlackFlag - Web Development Technical HOME ABOUT TIPS CONTACT SITEMAP jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法 2011/04/05 TAGS : jQuery JavaScriptでfunctionを“何秒後”に実行、といった指定をするのに使う「setTimeout」。 jQueryでもこの指定を使うことが出来るのですが、 必要な時に限って記述方法を忘れてしまっていることが多いので ここにメモ書きしておきます。（ごく単純な記述なのですが…） jQueryでsetTimeout ? 1 2 3 4 5 $(function(){ setTimeout(function(){ ～ここに処理を記載～ },1000); }); 処理を記載する箇所の後ろにある数値は、 “何秒後”に処理させるか、の値になります。 例えば、ページを読み込んだ後、 3秒後にbodyをフェードインさせる場合。（フェードインする時間は1秒） ? 1 2 3 4 5 6 $(function(){ $("body").css({opacity:'0'}); setTimeout(function(){ $("body").stop().animate({opacity:'1'},1000); },3000); }); こんな感じの書き方で実現できます。 この「setTime」を使った遅延処理はいろいろな使い方ができて アニメーションを使った演出を加える際などで何かと便利になったりします。 ご参考までに。。。 BlackFlag FOLLOW Related Posts jQueryでページロード時にカーテンが開くような効果をつけてみる jQueryでページ遷移時にアニメーション効果をつけてみる。 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 —————————————– こちらの記事がとても参考になるかと思います。 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 [...] 名前 [必須] メールアドレス（公開されません）[必須] URL コメント内容 ※コメントにHTMLタグを直接入力しないでください。 ※HTMLタグを入力する際はタグ一つ一つの括弧「＜」「＞」を全角に変換して入力してください。 コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。 » コメントについてのご注意 | » ライセンスに関して « PreviousPost jQueryで16進数の背景色をアニメーション（フェード）させる方法NextPost » jQueryでアニメーション処理（「.animate()」）完了後に別の処理を実行させる方法 ▲ PAGETOP jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法 BlackFlag Search... 送信 Hatena Bookmark jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 | Black...295users jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法 | BlackFlag210users 簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページ...178users jQueryでRetinaディスプレイを判別して処理を変える方法 | BlackFlag170users テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ | BlackFlag169users Popular Entries CSSで透明度／透過度（opacity）の指定をする方法 [326,554 views] jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法 [309,295 views] jQueryで特定の要素が存在するかどうかを判別する処理 [199,538 views] jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法 [176,205 views] jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法 [169,253 views] Recent Entries jQueryで要素に特定の属性が存在するかどうかを判別する処理 YouTube動画をクリックなどのイベント操作で読み込む方法 文章中の半角スペースをすべて削除するツール「半角スペース削除 [HALF SPACE DELETE]」作ってみました AndroidのChromeブラウザでデータセーバー機能がONかどうか判別する方法 jQueryで360度写真を使ったスライドギャラリーを作成する方法 福島被曝牛支援のお願い NO FUR Books jQuery Technical Note 外掛OUT! jQuery 高手精技 Partner 無料ホームページ Wix.com WebDevloper Tools QR CODE GENERATOR URL SHORTNER TEXT ENCODER FONT TYPE CHANGE [dp(dip)]→[px]Conversion Categories HTML／(X)HTML (30) HTML5 (23) CSS (108) CSS3 (68) jQuery (333) TIPS (156) プラグイン (147) プラグイン集 (39) ライブラリ情報 (2) JavaScript (27) Mootools (8) Twitter (6) Facebook (2) IE (17) Firefox (6) SEO (10) Flash (2) WordPress (3) Silverlight (3) Webサービス (48) WebサイトGallery (17) Web素材 (38) Web開発用ツール (27) Web情報 etc… (8) リリース情報（その他） (10) BlackFlag are . . . 都内で活動するマークアップエンジニアによる、 Webサイト構築に関する技術やWebサービスを紹介するブログです。 jQueryをはじめとしたWebサイトを彩る技術のほか、 HTML（HTML5）、CSS（CSS3）、iPhoneやTwitterを使った実験などなど、 Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。 ≫ About BlackFlag ≫ BlackFlag Information FriendshipLinks clownworkshttp://www.clownworks.org/ RONKIWA LLC.https://www.ronkiwa.jp/ GROUND BEAThttp://gbn.jp/ CHAMELEONhttp://www.designco.jp/ Tag !important 3D 360度 @import @media Adobe Ajax ALT Android Apple BrowserCheck canvas clearfix ColorChart Cookie CSS CssCheck CSSハック CSV DeepZoom disabled Dock DropDown easing Excel Facebook Firefox flash Font FreeFont Gallery GAME Google GPS hashchange HTML5アニメーション HtmlCheck IE IE6 iframe iPad iPhone iPod JavaScript jQuery jQueryMobile Loading Mailエンコード Mobile ModalWindow MoviePlayer Navigation netvibes NICE100 OGP OS判別 PageScroll PanelSlide PhotoShop PNG Prototype QR Retina RIREKITTER RollOver RSS Safari select SEO Silverlight SNS Spry TABLE ThickBox ToolTip Transform Transition Twitter viewport Webフォント WIX WYSIWYG YouTube zepto もっと見る アイコン アクセス解析 アコーディオン ウイルス カスタムシェイプ カルーセル カレンダー キーボード グラフ グリッドレイアウト サイト集 ジェネレーター スクロール スライド スロット スワイプ タイプライター タグクラウド タブ ダイヤログ ドラッグ ニュースティッカー バナー パネル パララックス ファイル変換 ファイル送信 フィルタ フォーム フリック フルスクリーン フレームアニメーション フローチャート ベクター ページトップ ページロード ページ遷移 ポップアップ マウスホイール マテリアル ランダム レスポンシブ ロゴ 上下中央 倍数 全角変換 共存 動画 半角スペース削除 右クリック禁止 名刺 広告 座標 改行 文字数カット 書籍 画像プリロード 画像加工 短縮URL 素材 背景分割 角丸 連番 連続半角英数 音素材 高さを揃える |HOME|ABOUT|jQuery/CSS3 TIPS|CONTACT|SITEMAP|RSS|TWITTER|FACEBOOK| © 2010 BLACKFLAG
