Javascript函数流程的最佳实践？

Question

我有一个相对容易的Ajax /动画,我正在添加到客户端站点以在项目之间进行选择以显示为图像.流程如下:

1. 用户点击项目概述(pHome)中的缩略图.
2. 使用jQuery,ajax在XML文件中加载图像,标题和项目描述数据(project1).
3. 从XML文件构造HTML并将其注入DOM(div id ="project1").
4. 动画和(4.5)消除pHome.
5. 淡出project1.
6. 为将用户带到项目的缩略图添加"抽吸"效果.

所有这些事情都需要同步发生,但我找不到合适的功能流程.将所有这些步骤附加到用户单击会在动画完成之前淡出pHome,并且在project1 div甚至可见之前触发'puff'效果.

事实上,我有所有这些步骤的功能,它看起来像一个真正的混乱.我要求的是构建这些函数的最佳实践方法,以便它们同步发生(可能除了2和3).就像一个援助,这是我的问题的伪代码:

$('#thumbnail').live('click', function(){
    loadXML(thumbnail_id);
    makeHMTL(data);
    $('pHome').animate({blah}).fadeOut();
    $('project1').fadeIn();
    $('thumbnail_id').puff();
});

我知道这显然是一种不好的方法 - 但我无法弄清楚如何嵌套/构造函数以使它们全部同步.而且我真的想要一个答案,让我有一些方法可以在将来构建我的功能以避免老鼠窝.教育我!:)

Answer 1

嵌套动画功能是一种方法,但当你做很多事情时可能会很讨厌,你很容易失去概述.

一个选项是将它们全部打包到一个对象中,并将引用传递给回调:

$('#thumbnail').live('click', animation.step1);

var animation = {
    step1: function() {
         $("#Element").show("puff", {}, "slow", animation.step2);
    },
    step2: function() {
         $("#Element").hide("linear", {}, "fast", animation.step3);
    },
    step3: function() {
         $("#Element").show("bounce", {}, 500);
    }
}

或者作为替代方案,您可以使用内置的动画队列,如下所示:

$("#go1").click(function(){
   $("#block1").animate( { width:"90%" }, { queue:true, duration:100 } )
               .animate( { fontSize:"24px" }, 1500 )
               .animate( { borderRightWidth:"15px" }, 1500);
})

另请查看文档:链接