setTimeout 函数无限运行答案

【问题标题】：setTimeout function is running infinitelysetTimeout 函数无限运行
【发布时间】：2020-07-02 23:16:57
【问题描述】：

我读到 setTimeout 函数只运行一次，而 setInterval 函数无限运行。但是在我从 w3schools setTimeout 中挑选的这个数字时钟代码中，它也无限运行。和onload方法有关系吗？

<!DOCTYPE html>
<html>

<head>
    <script type="text/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('txt').innerHTML =
                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;
        }
    </script>
</head>

<body onload="startTime()">
    <div id="txt"></div>
</body>

</html>

【问题讨论】：

startTime() 函数包含对 setTimeout 的调用，而 setTimeout 调用 startTime()，因此它无限运行。

标签： javascript html

【解决方案1】：

这是一个教科书式的递归案例——setTimeout() 调用 startTime()，后者又调用 setTimeout()...反过来又调用 startTime()。

你需要打破这个循环。简而言之，如果没有通过不调用startTime()

的函数的某些路径，您就不能从startTime()内部调用startTime()

【讨论】：

【解决方案2】：

这个版本的setInterval 可以无限运行，因为startTime 函数是一个递归函数。递归函数是在执行过程中调用自身的函数，这在大多数情况下意味着函数无限运行。

看这里：

function startTime() {
  // Code...
  var t = setTimeOut(startTime, 500);
}

setTimeOut 正在调用 startTime 函数，而后者又在调用 setTimeOut 函数……而且它还在继续。

【讨论】：