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

Question

我正在尝试建立一个计时器。请比较两种情况（第一种有效，第二种无效）：

• 内联javascript http://jsfiddle.net/x7xhA/
• 非内联 javascript http://jsfiddle.net/x7xhA/1/

问题是什么？

Answer 1

这是 jsFiddle 的“JavaScript 部分”用户经常遇到的问题。您会看到，放入“JavaScript 部分”的代码被包装在用作load处理程序的函数中，因此在您的第二个示例中，真正的输出结果是：

  <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函数包装在 jQueryready函数中，因此在全局范围内不可用。

固定：http: //jsfiddle.net/x7xhA/2/