Question

下面的代码会定期使用新文本更新div元素。如果我在Chrome调试器中设置断点并以步进模式运行，则代码会按照我的预期更新html。但如果没有任何断点设置运行，我会看到：

分钟= 0秒= 0

打印然后没有变化。

我做错了什么？

<html>
<script type="text/javascript">
var g_t1 = null;
var g_t2 = null;

function StartTimer() {
   g_t1 = new Date();
}

function StopTimer() {
   g_t2 = new Date();
}

function CalcDuration() {
   StopTimer();

   var diff = g_t2.getTime() - g_t1.getTime();
   var place = document.getElementById("here");
   var minutes = Math.floor((diff / 1000) / 60);
   var seconds = Math.floor((diff / 1000) % 60);
   place.innerHTML = "minutes = " + minutes + " seconds = " + seconds;

   window.setTimeout(CalcDuration(), 100);
}

function Poller() {
   if(!g_t1)
     StartTimer();

   window.setTimeout(CalcDuration(), 100);
}

</script>
<body onload="Poller();">
<div id="here"></div>
</body>
</html>

EDIT。

对于任何感兴趣的人，这些变体都有效：

window.setTimeout(CalcDuration, 100);

或

window.setTimeout(function(){CalcDuration()}, 100);

Answer 1

您需要在匿名函数中包装您的计时器函数调用，否则它会立即执行，而不是在计时器范围内执行。

window.setTimeout(function(){CalcDuration()}, 100);

Answer 2

当setTimeout在调试模式下工作但不在生产中时，你使用函数引用语法，例如

window.setTimeout(CalcDuration, 100);

那么你应该确保你正在定义这样的函数：

CalcDuraction = function() {
   ...
}

而不是

function CalcDuration() {
   ...
}

为什么这个javascript计时器代码在Chrome调试器中有效，但在正常运行时无效

2 个答案: