JavaScript中函数流的最佳实践？

Question

我有我认为是一个相对容易的Ajax /动画，我添加到客户端网站，以选择作为图像显示的项目之间。流程如下：

1. 用户在项目总览（pHome）中单击缩略图。
2. 使用jQuery，ajax将图像，标题和项目描述数据（project1）加载到XML文件中。
3. 从XML文件构造HTML并将其注入DOM（div id =“project1”）。
4. Animate和（4.5）淡出pHome。
5. 淡入项目1。
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); 
}) 

另请参阅文档：link

Answer 2

您可以使用一个回调到序列动画像这样：

$('#Div1').slideDown('fast', function(){ 
    $('#Div2').slideUp('fast'); 
}); 

另见Finish one animation then start the other one

Answer 3

的动画，淡入和粉扑的事件/行动都应该有属于自己的回调选项当他们完成时调用。所以你需要将这些嵌套在一起，而不是像你一样链接它们。

$("#pHome").animate({}, function(){ 
    $("#project1").fadeIn(500, function(){ 
     $("#thumbnail_id").puff(); 
    }); 
}); 

Answer 4

$("#thumbnail").live("click",function() { 
    $.ajax({ 
     type: "GET", 
     url: "myUrl.ashx", 
     data: { param1: 1, param2: 2 }, 
     success: function(data, textStatus) { 
      buildAndAppend(data); // Make sure it starts hidden. 
      $("#Element").show("puff", {}, "slow", function() { 
       anythingElse(); 
      }); 
     } 
    }); 
}); 

Answer 5

我建议您在loadXML函数中设置回调函数参数，以便在从服务器加载XML数据时能够执行makeHTML函数和效果。

对于动画，可以在前面的一个回调执行下面的动画，例如：

$('#thumbnail').live('click', function(){ 
    loadXML(thumbnail_id, function (data) { // data is loaded 
     makeHMTL(data); 
     $('pHome').animate({blah}, function() { 
     $(this).fadeOut(); 
     }); 

     $('project1').fadeIn('slow', function() { 
     $('thumbnail_id').puff(); 
     }); 

    }); 
}); 

你的loadXML函数可能看起来像这样：

function loadXML (thmbId, callback) { 
    $.post("/your/page", { thumbnail: thmbId }, function (data) { 
     callback.call(this, data); 
    }); 
    }