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 动画队列之外工作。如果有人对如何完成这样的情况有更好的建议，那将是有帮助的......

想象一个棒球场，第一名是跑步者（A），第三名是跑步者（B）。在一个动画包中，我想将跑步者 A 设置为第 3 名（中间停在第 2 名，2 次前进），并将跑步者 B 设置为 HOME（1 次前进）。

我必须用“queue: false”启动初始推进，以便跑垒员 A 和 B 同时移动到他们的一垒（跑垒员 A 到第二垒，跑垒员 B 到家）。

当 Runner A 完成移动到第二个时，我想将他移动到第三个（因此以编程方式构建一个带有嵌套回调的 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。但如果它都是一个元素，你可以使用直接循环。queuetrue

于 2012-06-06T17:11:15.910 回答