如何在Javascript中的两个时间间隔之间切换

Question

我在做数字钟。 我做了一个按钮，此按钮更改了时钟的格式（在AM / PM系统和24小时制之间）。 但是问题是当我切换“间隔”时，两个间隔都同时工作，并且导致时钟以秒为单位变化。

我尝试了很多我不记得的事情：/

const clock = document.querySelector('.clock');
const changeFormatButton = document.querySelector('.button-formatChange');

changeFormatButton.addEventListener('click', change);

let count = 0;
change();

function showTime24(){

    let date = new Date();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();

    hours = addZeros(hours);
    minutes = addZeros(minutes);
    seconds = addZeros(seconds);

    clock.innerHTML = `${hours} : ${minutes} : ${seconds}`;

}

function showTime12(){

    let date = new Date();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    let format = changeAMPM(hours);
    hours = changeFormat(hours);

    hours = addZeros(hours);
    minutes = addZeros(minutes);
    seconds = addZeros(seconds);

    clock.innerHTML = `${hours} : ${minutes} : ${seconds} ${format}`;
}

function changeFormat(time){
    if(time > 12){
        time -= 12;
    }
    if(time === 0){
        time = 12;
    }
    return time;
}

function addZeros(time){
    if(time < 10){
        time = '0' + time;
    }
    return time;
}

function changeAMPM(time){
    if(time < 12){
        format = 'AM';
    }
    if(12 < time < 24){
        format = 'PM';
    }
    return format;
}

function change(){
    count++
    let a = setInterval(showTime12, 0);
    let b = setInterval(showTime24, 0);

    if(count % 2 == 0){
        clearInterval(a);
    }
    else if(count % 2 == 0){
        clearInterval(b);
    }
    console.log(count);
}

两个时钟同时工作。 当我单击按钮时，它的工作原理越来越多。

Answer 1

这里有两个问题：

1-在功能change ，当您设置新的间隔时，您不会清除先前的间隔，从而导致新的和旧的间隔重叠。

您应该在设置新间隔之前清除当前间隔（也许您可能只有一个间隔变量？）。

2-您的if和else if条件相同（ count % 2 == 0 ），因此else块将永远不会执行！

var interval = setInterval(showTime12, 0); //a default format

function change(){
    count++;
    clearInterval(interval); //always clear the prev. interval

    if(count % 2 == 0){
        interval = setInterval(showTime12, 0);
    }
    else {
        setInterval(showTime24, 0);
    }
    console.log(count);
}

编辑：更好的方法

正如许多用户指出的那样，使用单个间隔并仅更改一个小变量，该解决方案将更加干净。 因此，让我们有：

var mode = '12'; //say default format is 12

function change(){
    mode = (mode == '12') ? '24' : '12';
}

function run() {
    action = (mode == '12') ? showTime12() : showTime24();
}

var interval = setInterval(run, 0); //a default format

Answer 2

提供的代码中还有很多额外的工作。 有可能修复死枝

if(count % 2 == 0){
    clearInterval(a);
}
else if(count % 2 == 0){ // unreachable!
    clearInterval(b);
}

并使用此逻辑有条件地设置一个间隔（当前， let a = ...在本地范围内，因此change结束后，之前的间隔会丢失而不会被清除），但是改进的设计将完全避免该问题。

代替使用两个间隔，一种优选的方法是连续运行一个间隔并使它有条件地执行各种工作。

另外， setInterval(fn, 1000)可能导致跳过几秒钟，因为回调可能间隔一秒以上才能运行。 最好使用requestAnimationFrame ，它为不断更新的功能提供更好的控制。

代码中有很多重复的逻辑 。 实际上， showTime12和showTime24几乎相同。 可以内联辅助函数，而不会影响可读性。

这是一个工作示例：

 const clock = document.querySelector(".clock"); const changeFormatButton = document.querySelector(".change-format"); let militaryTime = false; changeFormatButton.addEventListener("click", e => { militaryTime = !militaryTime; }); (function showTime() { requestAnimationFrame(showTime); const date = new Date(); let amPm = ""; let hours = date.getHours(); if (!militaryTime) { amPm = hours < 12 ? " AM" : " PM"; hours = hours % 12 || 12; } clock.innerText = `${hours} : ${date.getMinutes()} : ${date.getSeconds()}` .replace(/\\d+/g, m => m.padStart(2, "0")) + amPm; })(); 

 <div class="clock"></div> <button class="change-format">change format</button> 

Answer 3

function change(){
    count++
    function a(){
        let x;
        if(count % 2 === 0){
        x = showTime12();
        }
        else if(count % 2 === 1){
        x = showTime24();
        }
        return x;
    }
    setInterval(a, 0);
}

我成功了@ggorlen

我刚刚在change function中创建了一个函数，并将其设置为setInterval的参数:)

成为初学者的好一面是通过犯错误来学习...