如何使用 .click 在同一个 DOM 对象上设置 setInterval 和 clearInterval？

Question

BLUF：我正在尝试添加一个函数，将时间元素从 24 小时格式动态转换为 12 小时格式，反之亦然。日期和时间对象都按预期工作，但我有点头疼，我无法弄清楚添加此功能。

BACKGROUND：我正在尝试在触发 .click 事件时替换时间格式 (12/24h)。我大部分时间都在使用它，但是我似乎无法弄清楚如何使用相同的选择器停止一个功能并启动另一个功能，以便用户可以在时间格式之间来回切换而无需刷新 DOM.

问题：当单击 TIME DIV 时使用下面的代码会将时间转换为 12h (setTime12) 格式，但是当单击同一选择器将其转换回 24 小时制 (setTime24) 时，'TIME' 元素每秒在 12 小时制和 24 小时制之间来回转换。显然，这是因为 clearInterval 没有正确应用，所以两个函数同时执行。

那么如何动态触发 setTime12 和 setTime24 函数以确保它们不会同时执行？

干杯！

这里有一张 GIF 来说明这个问题：

我正在做的项目托管在这里：https://github.com/seanvree/homepage
我在上述项目中添加的功能在 develop 分支中：https://github.com/seanvree/homepage/tree/develop
主要的 .JS 文件在这里：https://raw.githubusercontent.com/seanvree/homepage/develop/js/main.js
工作演示（未添加此功能）：https://seanvree.github.io/homepage/

HTML:

<div class="timeArea">
    <p class="time" id="time" data-switch="b">
        <span id="hours"></span><span id="colon">:</span><span id="minutes"></span>
        <span class="date"></span>
    </p>
</div>

JS:

function setTime24() {
    var d = new Date().toLocaleTimeString('en-US', {
        hour12: false,
        hour: 'numeric',
        minute: 'numeric',
    });
    var parts = d.split(":");
    $('#hours').text(parts[0]);
    $('#minutes').text(parts[1]);
    $("#colon").css({
        visibility: toggle ? "visible" : "hidden"
    });
    toggle = !toggle;
};

function setTime12() {
    var d = new Date().toLocaleTimeString('en-US', {
        hour12: true,
        hour: 'numeric',
        minute: 'numeric',
    });
    var parts = d.split(":");
    $('#hours').text(parts[0]);
    $('#minutes').text(parts[1]);
    $("#colon").css({
        visibility: toggle ? "visible" : "hidden"
    });
    toggle = !toggle;
};

setDate($);

$('#time').click(function (e) {
    e.preventDefault();
    var that = $(this);
    switch (that.data('switch')) {
        case 'a':
            console.log('Set Time to 24h');
            $('#time').removeClass('12hr');
            $('#time').addClass('24hr');
            var myVar24 = setInterval(setTime24, 1000);
            clearInterval(myVar12);
            that.data('switch', 'b');
            break;
        case 'b':
            console.log('Set Time to 12h');
            $('#time').removeClass('24hr');
            $('#time').addClass('12hr');
            setTime12()
            var myVar12 = setInterval(setTime12, 1000);
            clearInterval(myVar24);
            that.data('switch', 'a');
            break;
    };
});

Answer 1

尝试在 $('#time').click(function (e) { 上面的行中定义 var myVar12, myVar24; 并删除 switch cases 中的 var 声明。

如何使用 .click 在同一个 DOM 对象上设置 setInterval 和 clearInterval？

How to setInterval and clearInterval on the same DOM object with .click?

javascript

setinterval

clearinterval