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);
}