使这些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功能更便携

回答

相关问题