内联和非内联JavaScript之间的不同行为

Question

我正在尝试构建计时器。请比较这两种情况（第一个作品，而不是第二）：

• 联JavaScript http://jsfiddle.net/x7xhA/
• 非内嵌的JavaScript http://jsfiddle.net/x7xhA/1/

问题是什么？

Answer 1

这是一个经常遇到的问题的jsfiddle的 'JavaScript部分' 的用户。你看，这是投入在你的第二个例子作为load处理函数内包裹着，所以“JavaScript部分”的代码，实际输出结果是这样的：

<script type='text/javascript'> 
    //<![CDATA[ 
    $(window).load(function(){ 
    var seconds = 0; 

function timedCount() { 
    $("#txt").val(seconds); 
    seconds += 1; 
    setTimeout("timedCount()",1000); 
} 
    }); 
    //]]> 
    </script> 

现在，timedCount不一个全局函数，因为它仅在load处理程序的范围内可用，并且当您将setTimeout与一串代码一起使用时，将从全局范围进行评估。

方法来解决这个问题包括：

变化setTimeout调用setTimeout(timedCount, 1000);

这个做什么，是通过实际的函数对象setTimeout。而不是从全局范围评估代码串，每次都基本上保留了调用函数的能力，因为范围已经不再重要了 - 您将函数交给setTimeout。

var seconds = 0; 

function timedCount() { 
    $("#txt").val(seconds); 
    seconds += 1; 
    setTimeout(timedCount,1000); 
} 

使timedCount使用timedCount = function() { ... };

这反而令timedCount一个全球性的，所以，当setTimeout试图从全球范围内评估timedCount();，它成功是有timedCount功能在全局函数全球范围。

var seconds = 0; 

timedCount = function() { 
    $("#txt").val(seconds); 
    seconds += 1; 
    setTimeout("timedCount();",1000); 
} 

Answer 2

第二个函数包装timedCount函数在jQuery ready函数中，因此在全局范围内不可用。

修正：http://jsfiddle.net/x7xhA/2/