Как правильно переключаться между двумя таймерами в JavaScript

Оффтоп javascript
1

Проблема с цифровыми часами

Создаю электронные часы с возможностью переключения формата времени. Есть кнопка, которая должна менять отображение между 12-часовым форматом (AM/PM) и 24-часовым форматом.

Но возникла проблема: когда переключаю между таймерами, они начинают работать одновременно, и часы начинают быстро мигать и меняться каждую секунду.

Пробовал разные способы, но ничего не помогает.

const timeDisplay = document.querySelector('.time-display');
const formatButton = document.querySelector('.format-btn');

formatButton.addEventListener('click', switchFormat);

let clickCounter = 0;
switchFormat();

function display24Hour(){
    let currentTime = new Date();
    let hrs = currentTime.getHours();
    let mins = currentTime.getMinutes();
    let secs = currentTime.getSeconds();

    hrs = padWithZero(hrs);
    mins = padWithZero(mins);
    secs = padWithZero(secs);

    timeDisplay.innerHTML = `${hrs} : ${mins} : ${secs}`;
}

function display12Hour(){
    let currentTime = new Date();
    let hrs = currentTime.getHours();
    let mins = currentTime.getMinutes();
    let secs = currentTime.getSeconds();
    let period = getPeriod(hrs);
    hrs = convertTo12Hour(hrs);

    hrs = padWithZero(hrs);
    mins = padWithZero(mins);
    secs = padWithZero(secs);

    timeDisplay.innerHTML = `${hrs} : ${mins} : ${secs} ${period}`;
}

function convertTo12Hour(hour){
    if(hour > 12){
        hour -= 12;
    }
    if(hour === 0){
        hour = 12;
    }
    return hour;
}

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

function getPeriod(hour){
    if(hour < 12){
        period = 'AM';
    }
    if(12 < hour < 24){
        period = 'PM';
    }
    return period;
}

function switchFormat(){
    clickCounter++
    let timer1 = setInterval(display12Hour, 0);
    let timer2 = setInterval(display24Hour, 0);

    if(clickCounter % 2 == 0){
        clearInterval(timer1);
    }
    else if(clickCounter % 2 == 0){
        clearInterval(timer2);
    }
    console.log(clickCounter);
}

В итоге оба формата часов работают параллельно, и при каждом клике на кнопку ситуация становится еще хуже.

2

Проблема в том что ты создаешь таймеры внутри switchFormat каждый раз при клике. Вынеси один setInterval наружу и просто меняй флаг формата. Например, сделай переменную is24Format = true, а в таймере проверяй её значение и вызывай нужную функцию отображения. Так у тебя будет работать только один таймер постоянно, а переключение будет мгновенным без мигания.

3

у тебя проблема в том, что ты создаёшь два setInterval одновременно в функции switchFormat. нужно сделать один глобальный таймер и переключать только функции отображения. создай переменную для хранения интервала вне функций, а в switchFormat сначала очищай предыдущий интервал, потом создавай новый с нужной функцией. еще у тебя в условии ошибка - два раза проверяешь четность, а должно быть else if для нечетности.

4

Попробуй сделать так, чтобы таймер создавался один раз, а переключение формата просто обновляло отображение. Удаляй старые интервалы перед созданием новых. И лучше устанавливай интервал на 1000 миллисекунд, чтобы обновление происходило каждую секунду.