Javascript中函数流的最佳实践？答案

【问题标题】：Best practice for function flow in Javascript?Javascript中函数流的最佳实践？
【发布时间】：2009-11-03 19:29:06
【问题描述】：

我有一个我认为是相对简单的 Ajax/动画，我将其添加到客户端站点以在项目之间进行选择以显示为图像。流程是这样的：

用户点击项目概览 (pHome) 中的缩略图。
使用 jQuery，ajax 将图像、标题和项目描述数据 (project1) 加载到 XML 文件中。
从 XML 文件构造 HTML 并将其注入 DOM (div id="project1")。
动画和 (4.5) pHome 淡出。
淡入项目 1。
为将用户带到项目的缩略图添加“粉扑”效果。

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

事实上，我有所有这些步骤的功能，看起来真的很乱。我要求的是一些构建这些函数的最佳实践方法，以便它们都同步发生（可能除了 2 和 3）。作为帮助，这是我的问题的伪代码：

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

我知道这显然是一种不好的方法 - 但我不知道如何嵌套/构造函数以使它们全部同步。真的，我想要一个答案，让我有办法在未来构建我的功能以避免老鼠窝。教育我！ :)

【问题讨论】：

标签： javascript coding-style jquery

【解决方案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

【讨论】：

【解决方案2】：

我建议您在您的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);
    });
  }

【讨论】：

【解决方案3】：

$("#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();
            });
        }
    });
});

【讨论】：

【解决方案4】：

您可以使用回调来对动画进行排序，如下所示：

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

另见Finish one animation then start the other one

【讨论】：

【解决方案5】：

动画、fadeIn 和 puff 事件/动作都应该有自己的回调选项，这些选项在它们完成时被调用。所以你也需要嵌套它们，而不是像你一样链接它们。

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

【讨论】：