javascriptの実行順序

Question

私はJavascriptとjQueryを学び始めています。 jQueryで簡単なスライドショーを作って、並べ替えられていないリスト項目を1つずつ表示したかったのです。

私のコードはここにある：on jsfiddle

私はforループでリスト項目を反復処理することにより、スライドショーを作成し、以下のようなフェードインとフェードアウト効果でそれらを表示したいと思った：

for(var i = 0; i < 3; i++) 
{ 
    $('#slider li:nth-child('+ i +')') 
     .fadeIn() 
     .delay(1000) 
     .fadeOut(); 
} 

しかし、それはリストの最後の項目だけを表示します。

私はiの値がループ内で2に増加していると見なすJavascriptスコープのため、別の関数で変数iの値を閉じる必要があることを読んだ。だから、私はiの値を閉じて、関数を呼び出した別の関数を作った。しかしそれはまだ同じで、リストの最後の項目を表示しています。

だから、私はちょうど以下のようなリスト項目に2つの別々の効果を作ることによってループせずに試してみたかった：

$('#slider li:first-child') 
    .fadeIn() 
    .delay(1000) 
    .fadeOut(); 
$('#slider li:nth-child(2)') 
    .fadeIn() 
    .delay(1000) 
    .fadeOut(); 

をしかし、それは順番に上に書いたようなリスト項目を表示しません。コードを実行すると、最初の項目が本当に速く表示され、最後の項目が意図したとおりに表示されるようです。

私はCコードまたはJavaコードのように書いており、上から下に実行すると考えています。しかし、それはJavascriptが異なっているようだと私はJavascriptの主要な概念を理解していない。

私の質問は、リスト項目を順番に表示せず、最後の項目のみを表示するのではなく、それを意図的に機能させるために何を知る必要があるのか​​ということです。

ありがとうございます。

Answer 1

あなたが機能しなかった理由は、既にカバーされているので、代わりに私は、次の作業スライドショーのコードをあなたのための新しいfiddleを設定しているとの説明を次のようにコメントし

$('#slider li').hide(); 

// Method 3 
var slideIt = function (which) { 
    $('#slider li:nth-child('+ which +')') 
     .fadeIn(300) 
     .delay(1000) 
     .fadeOut(300, function() { // after animation complete 
      which++; // increment which child 
      which = (which > $('#slider li').length) ? 
        1 : // if last child loop back to beginning 
        which; 
      slideIt(which); // call again with new child 
     }); 
}; 

slideIt(1); // start the process 

Answer 2

アニメーションは、基本的に将来のタスクをキューに入れるだけの、setTimeout（）/ setInterval（）への増分呼び出しを使用してバックグラウンドで実装されます。したがって、コード内で実際に行った関数呼び出しは同期操作ではなく、すべて1マイクロ秒以内に終了し、将来の多くのタスクがエンキューされました。

これは少し上手くいくことを示しています.2番目のアニメーションは、干渉しないように将来まで十分に開始する予定です。

for(var i = 0; i < 3; i++) 
{ 
    $('#slider li:nth-child('+ i +')') 
     .delay(2000 * i) 
     .fadeIn() 
     .delay(1000) 
     .fadeOut(); 
} 

私はjqueryの中で多くのアニメーションを行いませんが、私はいくつかのアニメーション機能は、それがアニメーションの終了だ後に呼び出されます引数としての機能を受け入れることを知っています。これにより、時間/数計算のトリッキーを行う必要がないため、シリアルアニメーションを簡単に行うことができます。

javascriptはシングルスレッドなので、すぐに完了しない同期操作で簡単にuiをブロックできます。だからあなたはそれを見事にして、ブラウザがその嘘をついているものを待ち行列に入れなければならない。

Answer 3

はるかに簡単な方法

$(document).ready(function() { 
    $('#slider li:gt(0)').hide(); 
    setInterval(
     function() { 
      $('#slider li:first-child') 
       .fadeOut() 
       .next('li') 
       .fadeIn() 
       .end() 
       .appendTo('#slider'); 
     } 
    , 3000); 
}); 

JavaScript SetIntervalメソッドを使用します。

することはできview the code in action here

P.S：