Question

所以我试图设置一个计时器来隐藏工作中的一些叠加层。这是一个超级基本的计时器，但计时器永远不会启动或运行....我不确定我在这里缺少什么。 http://jsfiddle.net/deadlychambers/sEn7X/

的JavaScript

$(document).ready(function () {
  CreateFrameTimer("timey", 30);
});
var FrameTimer;
var FrameTimerTotalSeconds;
var FrameTimerOn = false;

function CreateFrameTimer(TimerId, Time) {
    FrameTimerOn = true;
    FrameTimer = document.getElementById(TimerId);
    FrameTimerTotalSeconds = Time;
    UpdateFrameTimer();
    window.setTimeout("TickTock();", 1000);
}
function TickTock() {
    FrameTimerTotalSeconds -= 1;
    UpdateFrameTimer();
    if (FrameTimerTotalSeconds <= 0 || FrameTimerOn == false)
    {
        this.HideFrameOverlays();
        return;
    }
    window.setTimeout("TickTock();", 1000);
}
function UpdateFrameTimer(){
  $("#me").html(FrameTimerTotalSeconds);
}

HTML

<div id="me"></div>

Answer 1

window.setTimeout(TickTock, 1000);是正确的行。请参阅Updated JSFiddle。

JSFiddle也将Javascript加载更改为onDomReady，这允许Javascript窗格在全局级别上运行。还有一个类似的SO answer，它有助于解释将第一个参数从字符串更改为函数引用的原因。

Answer 2

这里有两个独立的事情要理解。首先，当您将字符串传递给setTimeout时，该代码只是在全局上下文中执行。当您向函数传递引用时，该特定函数将在全局上下文中执行。

其次，jsfiddle允许您选择代码是否包含在另一个函数中，这决定了您的变量和函数是否是全局的。

因此：

在编写代码时，小提琴试图执行一个名为TickTock的全局函数，但不存在这样的函数（因为你已经指示jsfiddle将你的代码包装在另一个函数中，并且JavaScript变量是作用于最近的包含函数）。因此，将引用传递给您要执行的特定函数。
另一方面，你也可以通过选择一个“无包装”的jsfiddle选项来解决你的问题，这会使你的函数全局化并且作为副作用会导致传递给{{1}的代码成功。

解决问题是一回事，但最好还是明白为什么会这样。

如何修复此Javascript计时器

2 个答案: