使這些javascript功能更便攜

我錯過了對javascript功能流程控制的一些基本理解...使這些javascript功能更便攜

我創建了一個jQuery幻燈片。該節目被分解成邏輯部分，每個部分由功能（可以很容易地在以後添加部分）...

function myslideshow() { 
    section1(); 
    section2(); 
    section3(); 
}

每一部分都有jQuery的語句，動畫，定時的東西組成的多種功能。 ..所以..也許

function section1() { 
    firstPart(); 
    setTimeout('secondPart()',5000); 
    setTimeout('thirdPart()',6000); 
}

現在，這裏是我的問題。我想定義「firstPart（），二部（），thirdPart（）」內SECTION1（）的函數。我想以各種理由這樣做：

每個部分可以在邏輯上有自己的「零件」
可移植性的部分

所以我想保持部分和其所有部分內的各個部分。

我似乎無法得到它的工作...當我在部分裏面定義「零件」時，所有的功能都在同一時間運行。

所以非常想什麼，我已經是：

function section1() { 
    firstPart(); 
    setTimeout('secondPart()',5000); 
    setTimeout('thirdPart()',6000); 

    function firstpart(){ 
     //some code here 
    } 

    function secondPart(){ 
     //some code here 
    } 

    function thirdPart(){ 
     //some code here 
    } 

}

但同樣不工作的方法正確;其實它正常工作，我只是沒有正確實施它！不知道是否需要利用函數回調（甚至不知道如何以「可擴展的方式」設置）。

另一個需要改進的地方是：setTimeouts用於確保secondPart在firstPart之後運行...想知道是否有更好的方法可以在前一個函數上「等待」（使用jquery動畫）來完成。

我很欣賞你可以提供的任何方向。謝謝！

來源

2011-10-05 twinturbotom

你打電話「的setTimeout（）」錯誤：

setTimeout(secondPart, 5000);

這將傳遞到你的本地函數的引用。當您傳遞一個字符串時，運行時系統將在全局上下文中計時器關閉時對其進行評估。因此，它不會找到您的本地功能。

至於最後一個問題，大多數（如果不是全部的話）jQuery動畫例程允許函數作爲最後一個參數傳遞。該功能在動畫完成後運行。同樣，在這種情況下，您應該傳遞對函數的引用，而不是包含函數調用表達式的字符串。（我懷疑這會與jQuery無論如何。）

來源

2011-10-05 14:41:29 Pointy

曾任職完美！謝謝！ – twinturbotom

一種方法是創建一個匿名「部分」的列表，並從一個控制功能順序調用它們。每個動畫列表的最終回調將依次調用下一部分。這裏有一個例子：

var Section1 = { 
    index: 0, 

    nextPart: function() { 
    if (Section1.index < parts.length) { 
     parts[Section1.index++](); 
    } 
    }, 

    parts: [ 
    // Part 1 
    function() { 
     $('.example').animate({ 
     // stuff 
     }).animate({ 
     // stuff 
     }).animate({ 
     // stuff 
     }, Section1.nextPart); 
    }, 

    // Part 2 
    function() { 
     $('.example').animate({ 
     // stuff 
     }).animate({ 
     // stuff 
     }).animate({ 
     // stuff 
     }, Section1.nextPart); 
    }, 
    ] 
};

在這個例子中，我做了一個SECTION1模塊，你會打電話SECTION1。nextPart（）啓動動畫序列。

注意與計時器您的問題仍然適用於各節自己：你還希望第2節等到SECTION1完成，這意味着你將再次需要在上面這個完全一樣的結構來控制的部分。我想，這是否真的有意義取決於分解這些部分的重要性。

來源

2011-10-05 14:55:18

我看到這種方法的力量......當我開始添加按鈕時，這可能是我實現的......謝謝 – twinturbotom

不知道如果我回答正確的問題，但我覺得模塊模式一個簡單的方法來建立一個命名空間和結構對象：

http://www.yuiblog.com/blog/2007/06/12/module-pattern/

所以，把所有的功能在你打算返回公開，其餘都是私人的。喜歡的東西：

 

    var s1 = function Section1() { 
     function firstpart(){ //Private and auto-execute 
      //some code here 
     }(); 

     function secondPart(){ 
      //some code here 
     } 
     function thirdPart(){ 
      //some code here 
     } 

     return { //Public stuff 
      secondPart:secondPart, 
      thirdPart:thirdPart 
     }; 
    }(); 

    setTimeout(s1.secondPart, 5000); 
    setTimeout(s1.thirdPart, 6000);

來源

2011-10-05 15:09:36

使這些javascript功能更便攜

回答

相關問題