javascript - 变量内的代码在没有被调用的情况下触发？

Question

我在网上找到了下面的代码，可以将时钟插入我的网站。在 startTime() 函数的最后一行声明了一个变量 t。然而，t 中的代码似乎在未调用 t 的情况下触发(这是显而易见的，因为时钟在站点中运行良好)。

为什么这段代码有效？

我从将函数分配为变量知道这些函数不会在分配时触发但需要被调用。我还尝试了下面的代码，但没有将 setTimeout 分配给 t，它也有效。将其分配给变量有什么意义？

我是 javascript 的新手，所以任何能帮助我理解这里发生的事情的解释都会很棒。

提前致谢!

代码:

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('timeLink').innerHTML = "Time: " +
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;

Answer 1

这一行:

 var t = setTimeout(startTime, 500);

表示在延迟 500 毫秒后，应该调用 startTime 函数。由于此代码位于 startTime 内，因此函数变为递归。 t 变量将接收一个数字，表示计时器的特定实例。如果您想取消计时器，可以稍后使用 clearTimeout() 函数...您可以将对要取消的计时器的引用传递给它，如下所示:

clearTimeout(t);

看看这个 Fiddle，看看 setTimeout() 返回的实际值:https://jsfiddle.net/34s2g1f4/6/

顺便说一下，一个更简化的时钟代码是:

window.addEventListener("DOMContentLoaded", function(){

   var timeLink = document.getElementById('timeLink');
   var t = null;

   // The parenthesis around this function make it a function
   // expression and the extra set of parenthesis at the end
   // cause the function to invoke itself. This syntax is also
   // known as an "Immediately Invoked Function Expression"
   (function startTime() {
      timeLink.innerHTML = "Time: " + new Date().toLocaleTimeString();
      t = setTimeout(startTime, 900);
   }());

});

此代码每 900 毫秒更新一次时间，而不是每 500 毫秒一次(因此它调用自身的频率几乎是原来的一半，但仍保持时间准确)。

setTimeout() 函数创建一个“一次性”计时器。计时器关闭后，调用提供的函数引用，这就是它的结尾，但在您的情况下，提供的函数引用是包含 setTimeout() 的函数，因此在第一次计时器之后熄灭，它再次调用当前函数，导致设置另一个“一次性”计时器，依此类推。当函数调用自身时，它被称为“递归函数”。

获得此行为的另一种方法是使用 setInterval()，它创建一个重复计时器，以您提供的时间间隔重复调用其函数。它看起来像这样:

window.addEventListener("DOMContentLoaded", function(){
   var timeLink = document.getElementById('timeLink');

   // Here, the call to start the timer is outside of the function
   // so startTime will not be recursive, it will just be called
   // repeatedly every 9/10's of a second.
   var t = setInterval(startTime, 900);
});

function startTime() {
   timeLink.innerHTML = "Time: " + new Date().toLocaleTimeString();
}

尽管公认的答案是这样说的(大部分是错误的)，setTimeout() 和 setInterval() 是标准化的并且已经存在了一段时间。来自:https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout