寻求定时器教程的解释答案

【问题标题】：seeking explanation for timer tutorial寻求定时器教程的解释
【发布时间】：2022-12-10 00:16:57
【问题描述】：

大家好，我是 JavaScript 的新手，正在观看一些关于 javascript 秒表的教程，我设法理解了大部分代码，但仍然有一些问题。想知道有人可以帮助解释间隔为 null 的目的是什么吗？这段代码是如何工作的？当我多次点击时，它是如何阻止函数再次运行的？

function start () {
    if (interval) {
        return
    }

    interval = setInterval(timer, 1000);
}

我粘贴了整个 JS 代码以提供更好的上下文

// Global variables
const time_el = document.querySelector('.watch .time');
const start_btn = document.getElementById('start');
const stop_btn = document.getElementById("stop");
const reset_btn = document.getElementById("reset");

let seconds = 0;
let interval = null;

// Event listeners
start_btn.addEventListener('click', start);
stop_btn.addEventListener("click", stop);
reset_btn.addEventListener("click", reset);

// Update the timer
function timer () {
    seconds++;

    // Format our time
    let hrs = Math.floor(seconds / 3600);
    let mins = Math.floor((seconds - (hrs * 3600)) / 60);
    let secs = seconds % 60;

    if (secs < 10) secs = '0' + secs;
    if (mins < 10) mins = "0" + mins;
    if (hrs < 10) hrs = "0" + hrs;

    time_el.innerText = `${hrs}:${mins}:${secs}`;
}

function start () {
    if (interval) {
        return
    }

    interval = setInterval(timer, 1000);
}

function stop () {
    clearInterval(interval);
    interval = null;
}

function reset () {
    stop();
    seconds = 0;
    time_el.innerText = '00:00:00';
}

【问题讨论】：

在 JS 中 null（以及其他一些值）是 falsey。查看 if 函数内的 start() 条件。

标签： javascript setinterval

【解决方案1】：

在 javascript null 的计算结果为false (falsy) 值：js-falsy，也有计算结果为true (truthy) js-truthy 的值，因此它们将变量 interval 初始化为 null 所以代码知道是否启动计时器，如果它没有评估为false（falsy）计时器已经启动并且setInterval已被调用，所以它会立即returns再次点击开始按钮。
setInterval 返回一个唯一标识符的间隔 ID：setInterval，这是在初始开始按钮单击时存储在 interval 中的内容，因此在后续单击时，变量 interval 的计算结果为 true（真实） .

【讨论】：