Settimeout()执行了更多次

Question

我正在尝试将功能添加到html/js stopwatch中，但是我对settimeout（）函数有问题。为什么只为我执行一次，但是在此视频中：

https://www.youtube.com/watch?annotation_id = Annotation_3059475893＆amp;feature = ump.amp;src_vid = sislwtgaw1ic＆amp; amp；

它被执行，直到有人停止它为止。是的，我知道我可以使用setInterval，但是我很好奇。

这是我的代码：

let running = false;
let time = 0;
function start() {
    running = true;
    timer();
}
function stop() {
    running = false;
}
function reset() {
    running = false;
    time = 0;
    document.getElementById("stw").innerHTML = "00:00:00";
}
function timer() {
    if (running) {
        setTimeout(function() {
            time++;
            let min = Math.floor(time / 100 / 60);
            let sec = Math.floor(time / 100) % 60;
            let mSec = time % 100;
            if (min < 10) {
                min = "0" + min;
            }
            if (sec < 10) {
                sec = "0" + sec;
            }
            if (mSec < 10) {
                mSec = "0" + mSec;
            }
            document.getElementById("stw").innerHTML =
                min + ":" + sec + ":" + mSec;
        }, 10);
    }
}

Answer 1

当您使用 setTimeout()创建循环时，函数 setTimeout()呼叫内部时，您必须再次致电setTimeout()。

这是一个基本的循环函数：

const loopFunc = () => {
  console.log('loop');
  setTimeout(loopFunc, 1000);
};
loopFunc(); // kick it off

Answer 2

在视频中（大约2分钟英寸），timer()递归地调用自己。您的代码没有。

Answer 3

setTimeout()仅调用其回调函数一次。

有两种方法可以多次调用它：

1. 使用setInterval()
2. 使用递归函数一遍又一遍地重新启动setTimeout()。

示例：

function timer() {
  // do something
  // call this function again in 10 milliseconds
  setTimeout(timer, 10);
}