1

不明な長さのネストされたコールバックの関数を作成する必要がある状況のコーディングに取り組んでいます。シーケンスされたアニメーションキューを作成して、要素を不明な数の位置に移動します。

たとえば、出力は次のようになります。X'complete'コールバックが内部にネストされています。

$('#element').animate(css, { complete: function () {
          $('#element').animate(css, { complete: function () {
              // more nested calls inside
          }
});

現在、これらの関数を文字列として生成しており、完了したら、それをnew Function（）にフィードしています。

myFunc = new Function(generatedFuncString);

コンテンツは信頼されていますが、パフォーマンスに悪影響を与えるeval（）を使用しています。別の/より良い方法があるかどうか疑問に思っていましたか？

編集：私がこのようにやっている理由は、実行するアニメーションのセットが非常に複雑で、jQueryアニメーションキューの外で作業しているためです。誰かがこのような状況を達成する方法についてより良い提案を持っているなら、それは役に立ちます...

1日にランナー（A）、3日にランナー（B）がいる野球場を想像してみてください。1つのアニメーションバンドルで、ランナーAを3番目にアニメーション化し（途中で2番目に停止し、2つ前進）、ランナーBをHOMEにアニメーション化します（1つ前進）。

ランナーAとBが同時に一塁に移動するように（ランナーAから2番目、ランナーBからホーム）、「queue：false」で最初の前進を開始する必要があります。

ランナーAが2番目に移動し終わったら、次に3番目に移動します（したがって、このシーケンスが保持されるように、プログラムでネストされたコールバックを使用してanimate（）呼び出しを作成します）。

文字列を介して関数を作成する理由は、最も内側のコールバックが最初に何になるかを知っており、そこから1つ以上の外部コールバックを再帰的に作成するためです。関数をオブジェクトとして操作し、すべての参照をそのままにしておくことで、これを行う方法を見つけることができませんでした。

これは単純な例であることに注意してください。基地がロードされている状況を想像してみてください。グランドスラムをアニメートする必要があります（4人のランナー全員がすべての基地を一周します。自宅で生まれたランナーは、自宅に戻る前に3回停止する必要があります）。等

4

1 に答える 1

6

タイトルで尋ねる質問に答える：、を介して、および必要なテキストを含む要素を挿入することにより、文字列から関数を作成evalできますnew Function。scriptしかし、それはすべて同じことです。JavaScriptパーサーを起動し、関数を作成します。

しかし、入れ子にするのではなく、連鎖させたいと思います。配列内のアニメーションのリストを作成し、animateコールバックを使用して配列内の次のアニメーションを呼び出します。のようなもの：

var animations = [
    /* css for first animation */,
    /* css for second animation */,
    /* etc. */
];
var index = 0;

function runAnimation() {
    if (index < animations.length) {
        $("#element").animate(animations[index++], runAnimation);
    }
}

もちろん、動的にアレイを構築します。

gdoronはコメントの中で、すべてのアニメーションが同じ要素上にある場合は、さらに簡単になる可能性があると指摘しています。

var animations = [
    /* css for first animation */,
    /* css for second animation */,
    /* etc. */
];
var index = 0;

for (index = 0; index < animations.length; ++index) {
    $("#element").animate(animations[index]);
}

...同じanimate要素を複数回呼び出すと、デフォルトでアニメーションがキューに入れられるためです（オプションのデフォルトは;残念ながら、ドキュメントにはそのようには記載されていないようです）。上記の私のコード例はキューに依存していないため、理論的には、配列内の各エントリは、アニメーション化する要素と適用するcssのセレクターのプロパティを持つオブジェクトである可能性があります。ただし、すべてが1つの要素である場合は、ストレートループを使用できます。queuetrue

于 2012-06-06T17:11:15.910 に答える