質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1165閲覧

$.whenの非同期処理の関数化をすると.doneの処理が一部されない

akihiro3

総合スコア955

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/11/09 10:29

編集2018/11/09 10:43

前提・実現したいこと

$.whenの非同期処理を1つの関数にしたいです。

右からスライドして現れて、左にスライドしながら消えていくスライダーを作りました。

$.whenの非同期処理を1つの関数にすると.doneの一部である、
$('.current').css({'left': width});だけが実行されません。

1つの関数にするにはどのようにすればよいのでしょうか
ご教授お願いします。

関数化する前のソースコード

html

1<div class="container"> 2 <ul class="slide_wrap"> 3 <li class="current"><div style="background:#aff;">スライド1</div></li> 4 <li class="nextSlide"><div style="background:#f00;">スライド2</div></li> 5 <li><div style="background:#faf;">スライド3</div></li> 6 </ul> 7</div>

css

1* { 2 margin: 0; 3 padding: 0; 4} 5 6li { 7 list-style: none; 8} 9 10.container { 11 width: 960px; 12 height: 400px; 13 margin: 50px auto 0; 14} 15 16 17.slide_wrap { 18 width: 500px; 19 height: 400px; 20 margin: 0 auto; 21 position: relative; 22 overflow: hidden; 23} 24 25.slide_wrap li { 26 position: absolute; 27 top: 0; 28 left: 100%; 29} 30 31.slide_wrap li.current { 32 left: 0; 33} 34 35.slide_wrap div { 36 width: 740px; 37 height: 400px; 38}

jquery

1$(function() { 2 function slidestart() { 3 var slideItem = $('.slide_wrap li'); // スライドさせる全ての画像の取得 4 var width = slideItem.width(); // 740: スライドさせる画像の幅 5 var nextNum = 1; // 次にスライドする要素のindex番号 6 var slideSet; // setIntervalのID 7 8 // done時の処理 9 function next() { 10 if(nextNum == slideItem.length - 1) { 11 nextNum = 0; 12 } else { 13 nextNum++; 14 } 15 $('.current').css({'left': width}); // 終ったスライド要素を初期位置に戻す 16 $('.current').removeClass('current'); 17 $('.nextSlide').addClass('current'); 18 $('.nextSlide').removeClass('nextSlide'); 19 slideItem.eq(nextNum).addClass('nextSlide'); // 次の要素をスタンバイ 20 } 21 22 function slide() { 23 // 非同期処理 24 $.when( // 先の順番の処理 25 $('.nextSlide').animate({left: 0},1500), // // 次をスライドイン 26 $('.current').animate({left: - width},1500) // スライドアウト 27 ).done(function() { // whenが終わったら実行 28 next(); 29 }); 30 } 31 32 slideSet = setInterval(function() { 33 slide(); 34 },4000); 35 36 setTimeout(function() { 37 clearInterval(slideSet); 38 },60000); 39 40 } // slidestart 41 42 slidestart(); 43});

試したこと

1.普通に関数化
結果・・・.doneの処理が一部されない

jquery

1 function current() { 2 $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン 3 $('.current').animate({left: - width},1500); // スライドアウト 4 } 5 6 function slide() { 7 // 非同期処理 8 $.when( // 先の順番の処理 9 current() 10 ).done(function() { // whenが終わったら実行 11 next(); 12 }); 13 }

2.DeferredとPromise
結果・・・動かない

jquery

1 var current = function () { 2 var d = $.Deferred(); 3 $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン 4 $('.current').animate({left: - width},1500); // スライドアウト 5 return d.promise(); 6 }; 7 8 function slide() { 9 // 非同期処理 10 $.when( // 先の順番の処理 11 current() 12 ).done(function() { // whenが終わったら実行 13 next(); 14 }); 15 }

3.非同期処理を別々の関数にしてreturnする
結果・・・動くのだが、そもそも1つの関数にしたいから他の方法を探す

jquery

1 function first() { 2 return $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン 3 }; 4 5 function second() { 6 return $('.current').animate({left: - width},1500); // スライドアウト 7 }; 8 9 function slide() { 10 // 非同期処理 11 $.when( // 先の順番の処理 12 first(), 13 second() 14 ).done(function() { // whenが終わったら実行 15 setTimeout(function() { 16 next(); 17 },1000); 18 }); 19 } // slide

4.1つの関数にして配列にしてreturnする
5..doneを遅延してみる
結果・・・.doneの処理が一部されない

jquery

1 function current() { 2 var obj = new Object(); 3 obj.val1 = $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン 4 obj.val2 = $('.current').animate({left: - width},1500); // スライドアウト 5 return obj; 6 }; 7 8 function slide() { 9 // 非同期処理 10 $.when( // 先の順番の処理 11 current() 12 ).done(function() { // whenが終わったら実行 13 setTimeout(function() { 14 next(); 15 },1000); 16 }); 17 } // slide

補足情報(FW/ツールのバージョンなど)

PC:win10
ブラウザ:chrome
jquery:1.12.4

jqueryCDN

1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

落とし所がどこなのかわからないのでなんともいえませんが
多分こういう事?

javascript

1 function current() { 2 return [ 3 $('.nextSlide').animate({left: 0},1500), 4 $('.current').animate({left: - width},1500), 5 ]; 6 } 7 function slide() { 8 $.when.apply(null,current()).done(function() { 9 next(); 10 }); 11 }

投稿2018/11/09 10:45

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

akihiro3

2018/11/09 11:00

ありがとうございます。 回答者が二方いてyambejpさんの方法でも解決できるのを確認しました。 先の回答者の方をベストアンサーにさせてもらいましたが、 別パターンとして参考にさせてもらいます
yambejp

2018/11/09 11:03

slideからwhenの実行部分だけをcurrentとして独立させたいのかと思ったのですが どうやら違ったようですね、失礼しました
akihiro3

2018/11/09 11:29

とんでもないです ありがとうございます。 試したことの4つ目の正しい方法だと理解しました 普通(っていうのでしょうか?)の配列にし、 配列を受け取る場合はcall()ではなく、apply()で第二引数。 とてもありがたい勉強になりました。
guest

0

ベストアンサー

単に関数内で$.when()を実行すれば解決します。

JavaScript

1function current() { 2 return $.when( 3 $('.nextSlide').animate({left: 0},1500), 4 $('.current').animate({left: - width},1500) 5 ); 6} 7 8//実行 9current().done(function() { 10 //両方のアニメーションが完了したときに呼び出される 11 setTimeout(function() { 12 next(); 13 },1000); 14}); 15

投稿2018/11/09 10:43

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

akihiro3

2018/11/09 10:55

ありがとうございます。 無事解決して、理想通りになりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問