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

Question

我正在编写一个我需要构造一个未知长度的嵌套回调函数的情况.它是创建一个有序的动画队列,以便在一个未知的位置上移动一个元素.

例如,输出看起来像这样,X'完整'回调嵌套在里面:

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

现在我将这些函数生成为一个字符串,然后一旦完成,将它提供给新的Function():

myFunc = new Function(generatedFuncString);

内容是可信的,但仍然使用eval(),这会产生负面的性能影响.我只是想知道是否还有其他/更好的方法？

编辑:我这样做的原因是因为我有一组非常复杂的动画要执行并且在jQuery动画队列之外工作.如果有人有更好的建议如何完成这样的情况会有所帮助......

想象一下棒球钻石,1号赛跑者(A)和3号赛跑者(B).在一个动画包中,我想要将跑步者A设为第3位(中间第2位停止,2位前进),以及跑步者B至HOME(1次前进).

我必须用'queue:false'开始初始进攻,以便跑步者A和B同时移动到他们的第一个基地(跑者A到第2,跑步者B到家).

当Runner A完成移动到2nd时,我想将他移动到3rd(因此用编程方式构建一个带嵌套回调的animate()调用,以确保保留此顺序).

我通过字符串构造函数的原因是因为我知道最内部回调将是什么,然后从那里递归地构造一个或多个外部回调.我无法通过将函数作为对象并保持所有引用的方式来找到一种方法.

请记住,这是一个简单的例子.想象一下基地装载的情况,我需要制作一个大满贯的动画(所有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在同一个元素上多次调用时,默认情况下动画会排队(该queue选项默认为true;遗憾的是文档似乎没有这么说).我上面的代码示例不依赖于队列,因此理论上,数组中的每个条目都可以是一个对象,其中包含要设置动画的元素的选择器属性以及要应用的css.但如果它只是一个元素,你可以直接使用一个循环.