2

連続して表示したい div がいくつかあります。私は試した：

var divs = ["#masterhead", ".links", ".code", ".projects", ".self"]
var fade_time = 1000;
var pause_time = 500;
for(var i = 0; i <= divs.length; i = i + 1)
{
    setTimeout( divs[i].fadeIn(fade_time) , 500) ;
}

（これは私が望むように動作します）とは対照的に、より短いコードが欲しかったので、私はそれを試しました：

    function A()
    {
        jQuery("#masterhead").fadeIn(fade_time);
        setTimeout(B, 500);
    }
    function B(){
        jQuery(".links").fadeIn(fade_time);
        setTimeout(C, 500);
    }

    function C(){
        jQuery(".code").fadeIn(fade_time);
        setTimeout(D, 500);
    }
    function D(){
        jQuery(".projects").fadeIn(fade_time);
        setTimeout(E, 500);
    }

    function E(){
        jQuery(".self").fadeIn(fade_time);
    }   
    A();

では、短いコードで何が間違っているのでしょうか?

4

3 に答える 3

5

コールバックを使用します。

var divs = ["#masterhead", ".links", ".code", ".projects", ".self"]
var fade_time = 1000;
var pause_time = 500;
var i = 0;
function startDisplay() {
  i = 0;
  showNext();
}
// just use this function as a callback, each time, to display the next
function showNext() {
  if (!divs[i]) {
    // dernière div
    return
  }

  setTimeout(function () {
    // you can hide the previous one, for example
    //$(divs[i-1]).hide();
    // take the current div, increment it
    $(divs[i++])
      // fade it in, and use the current function as callback
      .fadeIn(fade_time, showNext);
  }, pause_time);
}
于 2013-05-29T20:26:00.827 に答える
3

これは、まったく使用しない簡単な方法setTimeout()です。jQuery の.delay()メソッドは、この目的のために明確です。

for(var i = 0; i < divs.length; i = i + 1)
{
    $(divs[i]).delay(pause_time * i).fadeIn(fade_time);
}

デモ: http://jsfiddle.net/sK99B/

コードの 4 つの問題:

  • divs[i]にはセレクターが文字列として含まれているため、$(divs[i])呼び出すことができる jQuery オブジェクトを取得するために使用する必要があります.fadeIn()。
  • setTimeout()最初のパラメーターとして関数を想定しています。関数を直接呼び出そうとしています。これは、無名関数でラップすることで修正できます。
  • setTimeout()実行を一時停止せず、後で実行する関数をキューに入れます。したがって、すべてのタイムアウトが 500 に設定されているため、(仮想的に) 同時に実行するためにキューに入れられます。
  • 状態はごfor使用<にならないでください<=。

試す：

for(var i = 0; i < divs.length; i = i + 1)
{
    (function(i){
       setTimeout( function() { $(divs[i]).fadeIn(fade_time); }, pause_time * i);
    })(i);
}

デモ: http://jsfiddle.net/sK99B/1/

渡された関数がsetTimeout()ループ カウンターを使用する場合、関数iはループが終了するまで実行されないため、すべての関数が最終的な値を使用しようとするためi、クロージャーを導入する必要があることに注意してください。これにより、この方法はさらに厄介になります。

于 2013-05-29T20:27:10.327 に答える
1

これを試して -

for(var i = 0; i <= divs.length; i = i + 1){
  setTimeout( function(){ 
       $(divs[i]).fadeIn(fade_time);
   } , 500 + (i*pause_time)) ;
}
于 2013-05-29T20:26:23.333 に答える