1

私はJavaScript主導のサイトで作業しており、特定の順序で実行する必要のあるものがたくさんあります。多くのものには、アニメーションとAJAXの読み込みが含まれます。一部の擬似コードは次のようになります。

  1. JSON形式のデータを読み込む
  2. ロードされたJSONデータを使用してHTML要素を生成し、それらをdiv内にレンダリングします
  3. jQuery UIスライダーを使用して、div内の要素をスクロール可能にします
  4. 1からロードされた要素の総数までの数値をランダム化します
  5. jQuery UIスライダーを500ミリ秒の間、ランダム化された数値を表す要素までスクロール（アニメーション化）させます
  6. より多くのJSON形式のデータをロードする
  7. ページ上の他の要素を置き換えます
  8. 等々...

この各ステップは関数にラップされています。1つの関数はJSONデータをロードし、別の関数はHTML要素を生成し、3番目の関数はjQueryUIスライダーを初期化します。コードを関数にカプセル化すると、コードが読みやすくなりますが、何よりも、ページで何が起こっているかに応じて異なる順序で関数を呼び出せるようにしたいので、1つの関数が実行を終了してから次のものが実行されます。

AJAXやjQueryアニメーションを含まない通常の関数がある場合は、実行したい関数を次々に実行します。問題は、次に進む前に、アニメーションとデータ取得機能が終了するのを待つ必要があることです。jQueryのアニメーションメソッドとAJAXメソッドの両方を支援するために、コールバックを送信できます。しかし、ここで私は迷子になります。

私がやりたいことは次のとおりです。

  1. JSONデータをロードします。ロードが成功した場合は、続行して...
  2. HTML要素を生成する
  3. 要素をスクロール可能にする
  4. 1からロードされた要素の総数までの数値をランダム化し、それを...に渡します。
  5. jQueryスライダーを要素にスライド（アニメーション化）させる関数。アニメーションが終了したら...
  6. より多くのJSON形式のデータをロードします。ロードが成功した場合は、続行して...
  7. ページ上の他の要素を置き換えます

理想的なのは、この一連のイベントを1つの場所、たとえばイベントハンドラー内に設定できるかどうかです。関数を別の順序で呼び出したい場合、またはすべてを呼び出さない場合は、別のシーケンス/チェーンを設定するだけです。例は次のとおりです。

  1. 1からロードされた要素の総数までの数値をランダム化し、それを...に渡します。
  2. jQueryスライダーを要素にスライド（アニメーション化）させる関数。アニメーションが終了したら...

これは、各ステップのコールバックを制御する必要があることを意味します。

私が探しているものをご理解いただければ幸いです。単一の関数から実行シーケンス全体を制御したい。この機能は「オーケストラの指揮者」であり、他のすべての機能はオーケストラのさまざまな楽器セクションになります。この指揮者は、バイオリニストがソロを終えたときに聞こえ、ホーンに演奏を開始するように指示できるように、耳が必要です。申し訳ありませんが、私がやりたいことを理解しやすくなることを願っています。

前もって感謝します！/トーマス

4

4 に答える 4

1

jQuery .queue（）関数は役に立ちますか？

于 2010-11-17T15:10:25.037 に答える
0

配列（変更可能）であるシーケンサー変数を格納し、各関数の最後でシーケンサーを呼び出すことはできますか？

次に、各関数にステップコードを渡し、それをシーケンサー変数と相互参照して、次のステップを実行することができます。

擬似コード：

var func['1'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

var func['2'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

var func['3'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

var func['4'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

function sequencer(seq) {
  seq = seq + 1;
  window.func[seq]
}
于 2010-11-17T15:14:26.330 に答える
0

このコードを実行してみました：

var seq = 0;
var func = [];

func[1] = function(seq) {
    setTimeout(function() {
        console.log("Executing function 1");
        sequencer(seq);
    }, 2000);

}

func[2] = function(seq) {
    console.log("Executing function 2");
    sequencer(seq);
}

func[3] = function(seq) {
    console.log("Executing function 3");
}

function sequencer(seq) {
    seq = seq + 1;
    func[seq].call();
}

sequencer(seq);

しかし、(Firebug での) 結果は次のとおりです。

Executing function 1

func[seq] is undefined
[Break on this error] func[seq].call();

問題は文脈によって引き起こされていると思いますが、よくわかりません。JavaScript は、関数が呼び出されるコンテキストに敏感です。

/トーマス

于 2010-11-17T16:36:13.263 に答える
0

私が達成しようとしていたことは、私の目的に対して少しやり過ぎであることがわかりました。そこで、別のアプローチを取ることにしました。1 つ以上のブール変数をパラメーターとして関数に送信し、それらを使用して 2 番目の関数を実行するかどうかを決定できます。次に例を示します。

$("#justOneStep").click(function() {
   loadImage(false);
});

$("#twoStepsPlease").click(function() {
   loadImage(true);
});


function loadImage(boolDoMore) {
   // Do the stuff that loads an image
   ...

   if(boolDoMore) {
      nextFunction();
   }
}

function nextFunction() {
   // Do some more stuff
   ...
}

あまり派手ではありませんが、理解しやすく、制御しやすく、現時点での私のニーズには十分です。

/トーマス

于 2010-11-18T08:29:15.513 に答える