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

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


内联javascript http://jsfiddle.net/x7xhA/
非内嵌javascript http://jsfiddle.net/x7xhA/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);
}