javascript - 是否可以在不使用 eval() 的情况下通过字符串或其他技术以编程方式定义函数？

Question

我正在为需要构建未知长度的嵌套回调函数的情况编写代码。它是创建一个序列化的动画队列，以将元素移动到未知位置。

例如，输出看起来像这样，其中嵌套了 X 个“完整”回调:

$('#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)。在一个动画包中，我想让运行者 A 到第 3 位(中间停在第 2 位，前进 2 次)和运行者 B 到 HOME(前进 1 次)的动画。

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

当运行者 A 完成移动到第二名时，我想将他移动到第三名(因此以编程方式构建一个带有嵌套回调的 animate() 调用以确保保留此顺序)。

我通过字符串构造函数的原因是因为我知道最内层的回调首先是什么，然后从那里递归构造 1 个或多个外部回调。我想不出一种方法来将函数作为对象来处理并保持所有引用完好无损。

请记住，这是一个简单的示例。想象一下垒满了的情况，我需要制作一个大满贯的动画(所有 4 名运行者都围着所有垒打，从家出发的运行者需要停 3 站才能跑回家)。等等等等

Answer 1

回答您在标题中提出的问题:您可以通过 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在 same 元素上多次，默认情况下动画排队(queue 选项默认为 true；遗憾的是文档似乎没有比如说)。我上面的代码示例不依赖于队列，因此理论上数组中的每个条目都可以是一个对象，该对象具有用于选择器的属性，用于要设置动画的元素和要应用的 css。但如果都是一个元素，您可以直接使用循环。