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