質問編集履歴

2 誤字修正

akihiro3

akihiro3 score 932

2018/11/09 19:43  投稿

$.whenの非同期処理の関数化をすると.doneの処理が一部されない
### 前提・実現したいこと
`$.when`の非同期処理を1つの関数にしたいです。
右からスライドして現れて、左にスライドしながら消えていくスライダーを作りました。
`$.when`の非同期処理を1つの関数にすると`.done`の一部である、
`$('.current').css({'left': width});`だけが実行されません。
1つの関数にするにはどのようにすればよいのでしょうか
ご教授お願いします。
### 関数化する前のソースコード
```html
<div class="container">
   <ul class="slide_wrap">
       <li class="current"><div style="background:#aff;">スライド1</div></li>
       <li class="nextSlide"><div style="background:#f00;">スライド2</div></li>
       <li><div style="background:#faf;">スライド3</div></li>
   </ul>
</div>
```
```css
* {
   margin: 0;
   padding: 0;
}
li {
   list-style: none;
}
.container {
 width: 960px;
 height: 400px;
   margin: 50px auto 0;
}
.slide_wrap {
   width: 500px;
 height: 400px;
   margin: 0 auto;
 position: relative;
 overflow: hidden;
}
.slide_wrap li {
 position: absolute;
 top: 0;
 left: 100%;
}
.slide_wrap li.current {
 left: 0;
}
.slide_wrap div {
   width: 740px;
   height: 400px;
}
```
```jquery
$(function() {
   function slidestart() {
       var slideItem = $('.slide_wrap li'); // スライドさせる全ての画像の取得
       var width = slideItem.width(); // 740: スライドさせる画像の幅
       var nextNum = 1; // 次にスライドする要素のindex番号
       var slideSet; // setIntervalのID
       // done時の処理
       function next() {
           if(nextNum == slideItem.length - 1) {
               nextNum = 0;
           } else {
               nextNum++;
           }
           $('.current').css({'left': width}); // 終ったスライド要素を初期位置に戻す
           $('.current').removeClass('current');
           $('.nextSlide').addClass('current');
           $('.nextSlide').removeClass('nextSlide');
           slideItem.eq(nextNum).addClass('nextSlide'); // 次の要素をスタンバイ
       }
       function slide() {
           // 非同期処理
           $.when( // 先の順番の処理
           $('.nextSlide').animate({left: 0},1500), // // 次をスライドイン
           $('.current').animate({left: - width},1500) // スライドアウト
           ).done(function() { // whenが終わったら実行
               next();
           });
       }
       slideSet = setInterval(function() {
           slide();
       },4000);
       setTimeout(function() {
           clearInterval(slideSet);
       },60000);
   } // slidestart
   slidestart();
});
```
## 試したこと
**1.普通に関数化**
結果・・・.doneの処理が一部されない
```jquery
   function current() {
       $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン
       $('.current').animate({left: - width},1500); // スライドアウト
   }
   function slide() {
       // 非同期処理
       $.when( // 先の順番の処理
       current()
       ).done(function() { // whenが終わったら実行
           next();
       });
   }
```
**2.DeferredとPromise**
結果・・・動かない
```jquery
   var current = function () {
       var d = $.Deferred();
       $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン
       $('.current').animate({left: - width},1500); // スライドアウト
       return d.promise();
   };
   function slide() {
       // 非同期処理
       $.when( // 先の順番の処理
       current()
       ).done(function() { // whenが終わったら実行
           next();
       });
   }
```
**3.非同期処理を別々の関数にしてreturnする**
結果・・・動くのだが、そもそも1つの関数にしたいから他の方法を探す
```jquery
    function first() {
       return $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン
   };
    function second() {
       return $('.current').animate({left: - width},1500); // スライドアウト
   };
   function slide() {
       // 非同期処理
       $.when( // 先の順番の処理
       first(),
       second()
       ).done(function() { // whenが終わったら実行
           setTimeout(function() {
               next();
           },1000);
       });
   } // slide
```
**4.1つの関数にして配列にしてreturnする**
**5.`.done`を遅延してみる**  
結果・・・.doneの処理が一部されない
```jquery
   function current() {
       var obj = new Object();
       obj.val1 = $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン
       obj.val2 = $('.current').animate({left: - width},1500); // スライドアウト
       return obj;
   };
   function slide() {
       // 非同期処理
       $.when( // 先の順番の処理
       current()
       ).done(function() { // whenが終わったら実行
           setTimeout(function() {
               next();
           },1000);
       });
   } // slide
```
### 補足情報(FW/ツールのバージョンなど)
PC:win10
ブラウザ:chrome
jquery:1.12.4
```jqueryCDN
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
```
  • HTML

    24872 questions

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

  • CSS

    17746 questions

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

  • jQuery

    13559 questions

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

  • 関数

    1582 questions

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

  • 非同期処理

    651 questions

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

1 誤字修正

akihiro3

akihiro3 score 932

2018/11/09 19:39  投稿

$.whenの非同期処理の関数化をすると.doneの処理が一部されない
### 前提・実現したいこと
`$.when`の非同期処理を1つの関数にしたいです。
右からスライドして現れて、左にスライドしながら消えていくスライダーを作りました。
`$.when`の非同期処理を1つの関数にすると`.done`の一部である、
`$('.current').css({'left': width});`だけが実行されません。
1つの関数にするにはどのようにすればよいのでしょうか
ご教授お願いします。
### 関数化する前のソースコード
```html
<div class="container">
   <ul class="slide_wrap">
       <li class="current"><div style="background:#aff;">スライド1</div></li>
       <li class="nextSlide"><div style="background:#f00;">スライド2</div></li>
       <li><div style="background:#faf;">スライド3</div></li>
   </ul>
</div>
```
```css
* {
   margin: 0;
   padding: 0;
}
li {
   list-style: none;
}
.container {
 width: 960px;
 height: 400px;
   margin: 50px auto 0;
}
.slide_wrap {
   width: 500px;
 height: 400px;
   margin: 0 auto;
 position: relative;
 overflow: hidden;
}
.slide_wrap li {
 position: absolute;
 top: 0;
 left: 100%;
}
.slide_wrap li.current {
 left: 0;
}
.slide_wrap div {
   width: 740px;
   height: 400px;
}
```
```jquery
$(function() {
   function slidestart() {
       var slideItem = $('.slide_wrap li'); // スライドさせる全ての画像の取得
       var width = slideItem.width(); // 740: スライドさせる画像の幅
       var nextNum = 1; // 次にスライドする要素のindex番号
       var slideSet; // setIntervalのID
       // done時の処理
       function next() {
           if(nextNum == slideItem.length - 1) {
               nextNum = 0;
           } else {
               nextNum++;
           }
           $('.current').css({'left': width}); // 終ったスライド要素を初期位置に戻す
           $('.current').removeClass('current');
           $('.nextSlide').addClass('current');
           $('.nextSlide').removeClass('nextSlide');
           slideItem.eq(nextNum).addClass('nextSlide'); // 次の要素をスタンバイ
       }
       function slide() {
           // 非同期処理
           $.when( // 先の順番の処理
           $('.nextSlide').animate({left: 0},1500), // -740: 完全に消えた時
           $('.current').animate({left: - width},1500) // -740: 完全に消えた時
           $('.nextSlide').animate({left: 0},1500), // // 次をスライドイン
           $('.current').animate({left: - width},1500) // スライドアウト
           ).done(function() { // whenが終わったら実行
               next();
           });
       }
       slideSet = setInterval(function() {
           slide();
       },4000);
       setTimeout(function() {
           clearInterval(slideSet);
       },60000);
   } // slidestart
   slidestart();
});
```
## 試したこと
**1.普通に関数化**
結果・・・.doneの処理が一部されない
```jquery
   function current() {
       $('.nextSlide').animate({left: 0},1500); // -740: 完全に消えた時
       $('.current').animate({left: - width},1500); // -740: 完全に消えた時
       $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン
       $('.current').animate({left: - width},1500); // スライドアウト
   }
   function slide() {
       // 非同期処理
       $.when( // 先の順番の処理
       current()
       ).done(function() { // whenが終わったら実行
           next();
       });
   }
```
**2.DeferredとPromise**
結果・・・動かない
```jquery
   var current = function () {
       var d = $.Deferred();
       $('.nextSlide').animate({left: 0},1500); // -740: 完全に消えた時
       $('.current').animate({left: - width},1500); // -740: 完全に消えた時
       $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン
       $('.current').animate({left: - width},1500); // スライドアウト
       return d.promise();
   };
   function slide() {
       // 非同期処理
       $.when( // 先の順番の処理
       current()
       ).done(function() { // whenが終わったら実行
           next();
       });
   }
```
**3.非同期処理を別々の関数にしてreturnする**
結果・・・動くのだが、そもそも1つの関数にしたいから他の方法を探す
```jquery
    function first() {
       return $('.nextSlide').animate({left: 0},1500); // -740: 完全に消えた時
       return $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン
   };
    function second() {
       return $('.current').animate({left: - width},1500); // -740: 完全に消えた時
       return $('.current').animate({left: - width},1500); // スライドアウト
   };
   function slide() {
       // 非同期処理
       $.when( // 先の順番の処理
       first(),
       second()
       ).done(function() { // whenが終わったら実行
           setTimeout(function() {
               next();
           },1000);
       });
   } // slide
```
**4.1つの関数にして配列にしてreturnする**
結果・・・.doneの処理が一部されない
```jquery
   function current() {
       var obj = new Object();
       obj.val1 = $('.nextSlide').animate({left: 0},1500); // -740: 完全に消えた時
       obj.val2 = $('.current').animate({left: - width},1500); // -740: 完全に消えた時
       obj.val1 = $('.nextSlide').animate({left: 0},1500); // // 次をスライドイン
       obj.val2 = $('.current').animate({left: - width},1500); // スライドアウト
       return obj;
   };
   function slide() {
       // 非同期処理
       $.when( // 先の順番の処理
       current()
       ).done(function() { // whenが終わったら実行
           setTimeout(function() {
               next();
           },1000);
       });
   } // slide
```
### 補足情報(FW/ツールのバージョンなど)
PC:win10
ブラウザ:chrome
jquery:1.12.4
```jqueryCDN
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
```
  • HTML

    24872 questions

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

  • CSS

    17746 questions

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

  • jQuery

    13559 questions

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

  • 関数

    1582 questions

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

  • 非同期処理

    651 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る