JavaScript中函數流的最佳實踐？

我有我認爲是一個相對容易的Ajax /動畫，我添加到客戶端網站，以選擇作爲圖像顯示的項目之間。流程如下：JavaScript中函數流的最佳實踐？

用戶在項目總覽（pHome）中單擊縮略圖。
使用jQuery，ajax將圖像，標題和項目描述數據（project1）加載到XML文件中。
從XML文件構造HTML並將其注入DOM（div id =「project1」）。
Animate和（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(); 
});

我知道這顯然是一個壞的方式來做到這一點 - 但我無法弄清楚窩如何/結構的功能，使他們所有同步。真的，我想要一個答案，讓我有一些方法來構建我的功能，以避免老鼠巢。教育我！ :)

來源

2009-11-03 b. e. hollenbeck

嵌套的動畫功能是做一個方式，但是當你做了很多人，你會很容易失去概述可以是很討厭。

一種選擇是將它們全部打包成一個對象，並通過參照回調這樣：

$('#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

來源

2009-11-03 20:08:35 Mallox

您可以使用一個回調到序列動畫像這樣：

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

另見Finish one animation then start the other one

來源

2009-11-03 19:39:06 Soviut

的動畫，淡入和粉撲的事件/行動都應該有屬於自己的回調選項當他們完成時調用。所以你需要將這些嵌套在一起，而不是像你一樣鏈接它們。

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

來源

2009-11-03 19:44:08 WesleyJohnson

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

來源

2009-11-03 19:44:11 ChaosPandion

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

來源

2009-11-03 20:34:00 CMS

JavaScript中函數流的最佳實踐？

回答

相關問題