• 締切済み

jquery returnについて

貴重なスペースをお借りいたします。 jqueryを勉強中前々から調べてもよくわからない部分がございまして、 皆様のお力を貸して頂ければとおもいます。。。 jqueryのreturnについてなのですが、 あやふやな部分が多く、どこで使えるのか、どうゆうときに使うのかということが今だに理解できていないところがございます。 $('#photogallery li .imgArea').hide();//ページ上の画像を隠す $(window).bind("load", function(){ var interval = 300; //表示間隔 for(var i=0; i<$('#photogallery li .imgArea').length; i++) setTimeout(doFade(i), interval * i); function doFade(i){ return function(){ $('#photogallery li .imgArea').eq(i).fadeIn(1000); }; } }); 上記は画像のプリロードをするためのjqueryなのですが、最下部のreturn function～の部分ですね、 なぜreturnで関数を返さないといけないのかがさっぱりわかりません。 doFade(i)でfadeInを実行するならreturnをかかなくてもいいのではないかと思い困惑中です。 物分かりが良い方ではなく、どなたかわかりやすく説明していただける方がいたら、 どうぞ宜しくお願い致します。

みんなの回答

回答No.4

訂正 変数 a は、静的関数となります。 静的変数 -- jQuery を勉強中とのこと、私は使い方を知らないので他者の影響を受けてくださいね

回答No.3

> 値を保持出来ないためにreturnで値を返す必要がある ではなく、 値を保持出来ないためにreturnで、（ある環境を含んだ）関数を返す必要がある です。 -- またも脱線して、プログラムの基本？ それは「正しく動く」です。 が、さらに理想を言えば、「他者に影響されず、変更に強いプログラム」です。 数人が共同でプログラムを書き、寄せ集めたら動かない！では困ります。 jQuery と、prototype の両方を使ったら動かない！みたいな。 var a = 1; function A () { 　a = 2; } function B () { 　a = 1; } このようなグローバル変数を使うプログラムは、他者から変数 a を変更されるかもしれません。 これでは、他者に影響されます。まして、他者は A という名前、 B という名前が使えません。 （すでに使われて上書きされる可能性があるから） もし、関数 A,B を自分だけしか使わず、一度しか実行しないのなら (function () { 　var a = 1; 　function A () { a = 2; var b = 4;} 　function B () { a = 1; var b = 6;} 　 　// 複雑な処理 　A = 5; }) (); とすれば、名前空間を汚さず、関数も他者に使われることもありません。 変数 b は、独立したローカルの変数で、他者からの影響をうけません。 変数 b は、関数が呼ばれるときに初期化され、関数が終了すると破棄されます。 しかし、変数 a は破棄されず値を保ったままです。 "複雑な処理"部分で何度も関数 A, B が呼ばれたとしても、変数 a は、 無名関数が終了するまで、破棄されません。 変数 a は、静的関数となります。 -- 「スコープ」 var z = 1; function A (a) { 　var y = 2; 　function B (b) { 　　var x = 3; 　　function C (c) { 　　　var w = 4; 　　　var result = [a,b,c,z,y,x,w]; 　　　alert (result); // どの変数も参照できる。 　　　return result; 　　} 　　//alert ([z,y,x]); 　　return C;//関数をかえすのであって C を実行して値を返すわけではない。 　} 　//alert ([z,y]); 　return B (a); } var D = A ('babu'); さて、関数の中に関数を定義できるのですから更にその中にも関数を書けます。 関数 C の中からは、a,b,c,z,y,x,w を参照（書き換えも可）できます。 変数 D には結局、関数 C が返されます。（関数 C は、まだ実行されていないことに注目） つまり、 D (); //実行すると、 中の C (); が実行されます。 関数 D は、上書きされるまで静的変数を保持します。 このように、ある環境を閉じ込める方法を、クロージャーと呼びます（多分） -- ※注意点 関数 C からは、変数 z を参照できますが、そのために探す時間がかかります。（関数 C, B, A の順で探す） メモリーも食いそうだと想像がつきます。 さらに、（循環参照がおきるため）メモリーリークがあるかもしれません。ないかもしれませんが。

回答No.2

<!DOCTYPE html> <title></title> <meta charset="UTF-8"> <body> <script> var a = ['あ','い','う']; function hoge () { setTimeout (function () { alert (a[0]); }, 1000); setTimeout (function () { alert (a[1]); }, 2000); setTimeout (function () { alert (a[2]); }, 3000); } hoge (); /* */ </script> var a = ['あ','い','う']; function hoge () { setTimeout (function () { alert (a[0]); }, 1000); setTimeout (function () { alert (a[1]); }, 2000); setTimeout (function () { alert (a[2]); }, 3000); } hoge (); -- 繰り返し設定するのですから、ループ処理します。 function hoge () { 　var len = a.length; 　var i; 　 　for (i = 0; i < len; i++) { 　　setTimeout (function () { alert (a[i]); }, (i+1) * 1000); 　} } hoge (); しかし、これは動きません。 -- ループ処理の中の (i+1) * 1000) は、正しく1000ミリ秒ごとに刻むことはできます。 しかし、 function () { alert (a[i]); } の変数 i が、その関数の中で宣言されていません。 もし関数 hoge () の中で、var i; がなくグローバル変数として宣言されていても 関数 hoge () が実行されたとき変数 i は、３になっています。 1秒後に実行される最初の文字は、a[3] となり、それは配列 a の中にはありません。 もし、setTimeout に渡す関数 function () { alert (a[i]); } が、正しく変数 i の値を保持出来ないものでしょうか？ 動的変数ではなく、静的変数として！ -- ここで話題を変えて function hoge (i) { 　alert (i); } これがどういう動きをするかわかりますよね。 では、ある数を常に２倍する関数を書く場合 function hoge2 (i) { 　alert (i * 2); } では、３倍、４倍、・・・倍と必要になった場合、そのたびにそれ専用の関数を書かなければなりません function hoge3 (i) { 　alert (i * 3); } function hoge4 (i) { 　alert (i * 4); } これでは面倒です。 -- では、これはどうですか？ function createHoge (n) { 　var fx = function (i) { alert (i * n); }; 　return fx; } var hoge2 = createHoge (2); var hoge3 = createHoge (3); var hoge4 = createHoge (4); -- fx を省けば、 function createHoge (n) { 　return function (i) { alert (i * n); }; } -- これを「いわゆるクロージャー」と呼ぶそうです。 そして、setTimeout に渡す関数のことを、「コールバック関数」と叫ぶそうです。

yukiponta
質問者

お礼

ご回答どうもありがとうございます。 setTimeout に渡す関数 function () { alert (a[i]); } が、正しく変数 i の値を保持出来ないためにreturnで値を返す必要があるということでしょうか？

回答No.1

では、問題。 配列 a の中の文字をそれぞれ、１秒後、２秒後、３秒後に表示するプログラムを書きなさい。 var a = ['あ','い','う']; function hoge () { setTimeout (function () { alert (a[0]); }, 1000); setTimeout (function () { alert (a[1]); }, 2000); setTimeout (function () { alert (a[2]); }, 3000); } hoge (); もし、配列 a に五十音があった場合どうしますか？５０個書きますか？ 工夫してみてください。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • サムネイルで画像を切り替えるjQuery

    下記サイトを参考にサムネイルで画像を切り替えるjQueryを作成しました。 http://tam-tam.co.jp/tipsnote/javascript/post3351.html 自動で切り替えしないようにスクリプトを一部修正して下記を設置しています。 chromeなどでは問題なくスムーズに切り替わるのですが、 firefoxでは、メイン画像とサムネイルが切り替わる際に （フェードイン・フェードアウトの時） 背景が黒くなってしまいます。 また少し動作が不安定に感じます。 背景は白のままで、出来れば動作も改善させたいのですが、 原因が分からず困っています。 どなたか参考サイトのサンプルで原因が分かる方がおられましたら ご教授いただけないでしょうか。 どうぞ宜しくお願い致します。 $(function (){ //設定 var active="active",interval=6000; var index=0, timerId=null; var tabs=$("#thumbBtn > li"), content=$("#view > p"), cap=$("#caption > li"); //クラスの付与 tabs.each(function(){$(this).removeClass(active);}); content.hide(); cap.hide(); tabs.eq(0).addClass(active); content.eq(0).fadeIn("fast"); cap.eq(0).fadeIn("fast"); //クリックされたらactiveというクラスを付与、 //切り替え、タイマーをリセット tabs.click(function(){ if($(this).hasClass("active")) return; if(timerId) clearInterval(timerId),timerId=null; change(tabs.index(this)); setTimer(); return false; }); //タイマー // setTimer(); // function setTimer(){ // timerId=setTimeout(timeProcess,interval); // return false; // } function timeProcess(){ change((index+1)%tabs.length); timerId=setTimeout(arguments.callee,interval); } //切り替え function change(t_index){ tabs.eq(index).removeClass(active); tabs.eq(t_index).addClass(active); //fadeout setTimeout(function(){ content.eq(index).stop(true, true).fadeOut(3000), cap.eq(index).stop(true, true).hide() ;}, 300); //fadein setTimeout(function(){ index=t_index; content.eq(index).fadeIn(3000), cap.eq(index).fadeIn(3000) ;}, 400) } });

  • 3枚の画像をフェードイン

    3枚の画像を順番にフェードインさせたいのですが、ＩＥで確認すると先にパっと画像が表示された後にすぐにその画像が消えてフェードインが次々始まります・・・。何かソース等ミスがあるのかＩＥ対策をしないといけないのかわかりません・・。ページを表示させたあと更新を押すと正常に動くのですがブラウザを閉じて再度表示させるとまたパっと画像が現れた後にフェードインが始まる感じです。 ソースは下記になります。 最初のパッと画像が現れる原因と対策を教えてください・・・！ <script type="text/javascript"> $(function(){ 　$('#fade li').hide(); }); $(window).bind("load", function(){ 　var interval = 400; //表示間隔 　for(var i=0; i<$('#fade li').length; i++) 　　setTimeout(doFade(i), interval * i); 　function doFade(i){ 　　return function(){ $('#fade li').eq(i).fadeIn(2000); }; 　} }); </script> 【ＨＴＭＬ】 <ul id="fade"> <li><img src="image/mainpx_01.jpg" alt="" width="365" height="484" style="display: inline; " /></li><li><img src="image/mainpx_02.jpg" alt="" width="365" height="484" style="display: inline; " /></li><li><img src="image/mainpx_03.gif" alt="" width="270" height="484" style="display: inline; " /></li></ul>

  • 【jQuery】setInterval

    jqueryの初心者です。 3つの画像を3秒間隔でクロスフェードさせ、それを繰り返したいのですが setIntervalの使い方が違うのか、思うような動きになりません。 何が原因なのかと、無駄な部分があると思いますので なるべくシンプルで初心者レベルのコードを教えて頂きたいです。 宜しくお願いします。 $(function(){ setInterval(function(){ setTimeout(function(){ $(".photo-1").fadeOut(1000); },3000); setTimeout(function(){ $(".photo-2").fadeIn(1000); },3000); setTimeout(function(){ $(".photo-2").fadeOut(1000); },6000); setTimeout(function(){ $(".photo-3").fadeIn(1000); },6000); setTimeout(function(){ $(".photo-3").fadeOut(1000); },9000); setTimeout(function(){ $(".photo-1").fadeIn(1000); },9000); },3000); }); <div id="photo-box"> <p class="photo-1"><img src="img/01.jpg" width="500" height="150" alt="" /></p> <p class="photo-2"><img src="img/02.jpg" width="500" height="150" alt="" /></p> <p class="photo-3"><img src="img/03.jpg" width="500" height="150" alt="" /></p> </div>

  • jqueryでの画像表示について

    どなたか教えて頂ければ幸いです。 画像のプリロードをするためjqueryを書いているのですが、 うまくいかず助けて頂きたくまいりました。 <div id="slideshow" class="clearfix"> <ul class="slider clearfix"> <li><a href="#"><img src="img/dress1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress9.jpg" alt="" /></a></li> </ul> </div> $('#slideshow .slider li').hide();//ページ上の画像を隠す var i = 0; var c = 0; $(window).bind("load", function() { var c = setInterval(showImg() , 500); }); function showImg() { var imgLength = $('#slideshow .slider li').length; if (i >= imgLength) { clearInterval(c); } $('#slideshow .slider li:hidden').eq(0).fadeIn(500); i++; } 上記のように書いたのですが、ループしてくれません。 i++がきいてないように思います。 一枚ずつ表示していき、非表示の最初のliにフェイドインさせるようにしています。 すみませんが教えて頂ければ幸いです。 宜しくお願い致します。

  • 同一ページ内の複数のタグに同一のJQueryを実行

    JQuery初心者です 同一ページ内にサムネイル付ギャラリーを複数作り、 ギャラリーごとに横にスクロールする形で作っています。 今の状態ですと、1ページ目は正常動作で問題はありません。 ただ、1ページ目のJQuery処理前に<a href="#pege2">ページ2へ</a>で2ページ目にスクロールすると、2ページ目のメイン画像抜けてしまいます。 恐らく、前ページでのJQueryの処理が終了してないからだと思います。しばらくすると 前ページの処理が終了し2ページ目のメイン画像に反映されます。 これをどうにか<section id="pege●">ごと、もしくは<a href="#pege●">ページ●へ</a>をクリックしたらJQueryが実行する事が出来ないでしょうか？ 色々調べてみましたが、出来ませんでした。 ご享受の程、宜しくお願いいたします。 参照ページ（http://www.tam-tam.co.jp/tipsnote/javascript/post68.html） html（こんな感じで作ってます） <article> <section id="pege1"> <section id="view"><!-- メイン画像--> <p><img src="images/big_a01.jpg" width="" height="" alt="" /></p> <p><img src="images/big_a02.jpg" width="" height="" alt="" /></p> </section> <ul id="thumbBtn"><!-- サムネイル画像--> <li><img src="s_a01.jpg" width="" height="" alt="" /></li> <li><img src="s_a02.jpg" width="" height="" alt="" /></li> </ul> <div id="details"><!-- 説明--> <h2>説明文</h2> <p><a href="#pege2">ページ2へ</a></p> </div> </section></section> <section id="pege2"> <section id="view"><!-- メイン画像--> <p><img src="images/big_b01.jpg" width="" height="" alt="" /></p> ・以下同じ <p><a href="#pege3">ページ3へ</a></p> </section></section> <section id="pege3"> ・以下同じ </section></section> </section> </article> JQueryの記述は次の通りです。 <script type="text/javascript"> $(function (){ //設定 var active="active",interval=5000; var index=0, timerId=null; var tabs=$("#thumbBtn > li"), content=$("#view > p"), cap=$("#caption > li"); tabs.each(function(){$(this).removeClass(active);}); content.hide(); cap.hide(); tabs.eq(0).addClass(active); content.eq(0).fadeIn(0); cap.eq(0).fadeIn(0); //クリックされたらactiveというクラスを付与、 //切り替え、タイマーをリセット tabs.click(function(){ if($(this).hasClass("active")) return; if(timerId) clearInterval(timerId),timerId=null; change(tabs.index(this)); setTimer(); return false; }); //タイマー setTimer(); function setTimer(){ timerId=setTimeout(timeProcess,interval); return false; } function timeProcess(){ change((index+1)%tabs.length); timerId=setTimeout(arguments.callee,interval); } //切り替え function change(t_index){ tabs.eq(index).removeClass(active); tabs.eq(t_index).addClass(active); //fadeout setTimeout(function(){ content.eq(index).stop(true, true).fadeOut(0), cap.eq(index).stop(true, true).hide() ;}, 0); //fadein setTimeout(function(){ index=t_index; content.eq(index).fadeIn(0), cap.eq(index).fadeIn(0) ;}, 0) } }); </script>

  • jquery not()がきかない

    jqueryについて１点だけ教えて頂きたいことがございます。 今、下記のjqueryにてロールオーバー時のイベントを実行しています。 $('a:not(.current) img').each(function() { var target = $('a:not(.current) img') target.hover(function(){ $(this).stop().fadeTo(500,0.6); }, function() { $(this).stop().fadeTo(500, 1); }); }); それともう一つjqueryである一部分だけ違うロールオーバーにしたく、 全体にかかる上記のjqueryで、#photogalleryというID以外の(a:not(.current) img)にしたいのですが、 ('a:not(.current) img')を $('div').not('#photogallery').find('a:not(.current) img') このようにしてみたのですが、#photogalleryまで実行されてしまいます。 調べて見たのですがわからず、教えて頂ければ幸いです。 どうぞ宜しくお願い致します。

  • jqueryについて困っております。

    下記のスライドショーを同一ページ内に複数つけたいのですが、 バグがでてしまいます。 おそらく変数がバッティングしてしまっていて、photogallery1とphotogallery2が 干渉しあわないようにしたいのですが、どのようにしたらいいかわかりません。 ご教示いただければ幸いです。 すみません大変急いでおりまして、出来ればすぐに皆様のお力を貸していただければ と思っております。よろしくお願いいたします。 $(function(){ pg('#photogallery1'); pg('#photogallery2'); function pg(selector){ $(selector).each(function(){ var photo = $(".photoBox").find('li'); var thumb = $(".thumbBox").find('li'); var fadeSpeed = 400; var changeSpeed = 4000; var photoLength = photo.length; var nowBox = 0 photo.filter(":not(':eq(0)')").hide(); var timer = setInterval(slideshow , changeSpeed); function slideshow(){ if(nowBox == photoLength - 1){ photo.fadeTo(fadeSpeed , 0); nowBox = 0; photo.eq(nowBox).fadeTo(fadeSpeed , 1); }else{ photo.fadeTo(fadeSpeed , 0); nowBox ++; photo.eq(nowBox).fadeTo(fadeSpeed , 1); } }; thumb.hover(function(){ clearInterval(timer); $(this).stop().fadeTo(fadeSpeed , 0.6); nowBox = $(this).index(); photo.stop().fadeTo(fadeSpeed , 0) .eq(nowBox).stop().fadeTo(fadeSpeed , 1); },function(){ timer = setInterval(slideshow , changeSpeed); $(this).stop().fadeTo(fadeSpeed , 1); }); }); }; });

  • jQueryでfadeInのタイミング（Speed

    jQueryを勉強中で、こちらのページにある、 時間差で要素がフェードインするスプリクトを 参考にさせていただいています。 http://y-growth.com/blog/archives/281.html サンプルでは、 $("#fade li:nth-child(1)").fadeIn("5000",function() { $("#fade li:nth-child(2)").fadeIn("5000",function() { $("#fade li:nth-child(3)").fadeIn("5000", function(){ となっていて、等間隔でフェードインさせています。 このフェードの間隔を調整したいのですが、 $("#fade li:nth-child(1)").fadeIn("50000",function() { $("#fade li:nth-child(2)").fadeIn("10000",function() { $("#fade li:nth-child(3)").fadeIn("5000", function(){ このようにSpeedの値を変更しても、 等間隔でフェードインしてしまいます。 また、このような指定でも、同時にフェードインしてしまいます。 $("#fade li:nth-child(1)").fadeIn("50000"); $("#fade li:nth-child(2)").fadeIn("10000"); 何か見落としがあるのでしょうか？ どなたか、どうぞよろしくお願いいたします。

  • ｊQueryでのclassの操作

    現在Wordpressに、文字のサイズを「小・中・大」と変えるjQueryを設置しています。 http://az-store.nrym.org/download/extend/jquery-fontsize-switcher/ Wordressではもともとbodyのclassに指定があるのですが、このjQueryを設置すると removeAttr("class")で削除されてしまいます。 そこで、もともとのClassを活かしたまま文字サイズ変更用のクラスだけを 削除&追加ができればいいのですが、 どうすればよいでしょうか？ ただ、単純に「removeAttr("class")」の記述を削除してしまうと、 文字サイズ変更スイッチを押す度に、クラスが追加され続けるのでそれは避けたいです。 $(function(){ var currentstyle = readCookie('fontStyle'); if (currentstyle){ switchFont(currentstyle); }; $("li.sizeL").click(function(){ switchFont("fontL"); return false; }); $("li.sizeM").click(function(){ switchFont("fontM"); return false; }); $("li.sizeS").click(function(){ switchFont("fontS"); return false; }); }); function switchFont(className){ $("body").removeAttr("class").addClass(className); createCookie('fontStyle', className, 365); }; // cookie script http://www.quirksmode.org/js/cookies.html function createCookie(name,value,days){ if (days){ var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name){ var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }

    • ベストアンサー
    • AJAX
  • jqueryで順番に実行する方法

    jqueryについて教えてください。 画像を順番に表示するにはどうすればよいのでしょうか？ 下記のようにやるとすべての画像が同時にフェードイン、フェードアウトします。 setInterval(function() { $("#i1").fadeIn(3000).fadeOut(3000); $("#i2").fadeIn(3000).fadeOut(3000); $("#i3").fadeIn(3000).fadeOut(3000); $("#i4").fadeIn(3000).fadeOut(3000); $("#i5").fadeIn(3000).fadeOut(3000); }, 6000); 同時にではなく、順番（１を表示した後に２というように）に表示するにはどうすればよいのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する