Navigating between two intervals in JavaScript requires following a few simple steps

Question

Navigating between two intervals in JavaScript requires following a few simple steps

I have created a digital clock with a button that switches the format between AM/PM system and 24-hour system. However, I am facing an issue where both formats are running simultaneously, causing the clocks to change every second.

Despite trying various solutions, I am unable to resolve this issue.

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);
}

Both clocks are running simultaneously and clicking the button only adds to the confusion.

https://i.stack.imgur.com/sBxhX.gif

javascript html

Answer 1

Answer №1

There are two key issues to address in this code:

1- Within the change function, the new intervals are being set without clearing the previous ones, resulting in overlap between the old and new intervals.

To resolve this, it is essential to clear the current interval before assigning new ones (consider utilizing a single interval variable).

2- The conditions within the if and else if statements are identical (count % 2 == 0), meaning that the else block will never be executed!

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

function change(){
    count++;
    clearInterval(interval); //clear the previous interval

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

Edit: Proposed Improved Approach

As suggested by multiple users, adopting a more streamlined solution involves utilizing a single interval and altering a minor variable. This revised approach entails:

var mode = '12'; //assuming the default format is 12

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

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

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

Answer 2

There are two key issues to address in this code:

1- Within the change function, the new intervals are being set without clearing the previous ones, resulting in overlap between the old and new intervals.

To resolve this, it is essential to clear the current interval before assigning new ones (consider utilizing a single interval variable).

2- The conditions within the if and else if statements are identical (count % 2 == 0), meaning that the else block will never be executed!

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

function change(){
    count++;
    clearInterval(interval); //clear the previous interval

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

Edit: Proposed Improved Approach

As suggested by multiple users, adopting a more streamlined solution involves utilizing a single interval and altering a minor variable. This revised approach entails:

var mode = '12'; //assuming the default format is 12

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

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

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

Answer 3

Answer №2

The provided code contains unnecessary redundancies that can be streamlined for better efficiency. It's important to address the dead branch within the logic.

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

To optimize this code, it is advisable to rethink the implementation of intervals and consider using a single interval with conditional operations instead. Currently, the local scope of let a = ... causes the previous interval to be lost without proper clearance after change ends.

An improved design would involve running one interval continuously and incorporating conditional tasks within it to enhance functionality.

Furthermore, replacing setInterval(fn, 1000) with requestAnimationFrame is recommended for smoother execution of constantly updating functions while avoiding skipped seconds in the process.

The code also exhibits signs of repetitive patterns, especially within showTime12 and showTime24, which are almost identical. Inlining most of the helper functions would improve code readability without sacrificing clarity.

For a functional example:

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 4

The provided code contains unnecessary redundancies that can be streamlined for better efficiency. It's important to address the dead branch within the logic.

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

To optimize this code, it is advisable to rethink the implementation of intervals and consider using a single interval with conditional operations instead. Currently, the local scope of let a = ... causes the previous interval to be lost without proper clearance after change ends.

An improved design would involve running one interval continuously and incorporating conditional tasks within it to enhance functionality.

Furthermore, replacing setInterval(fn, 1000) with requestAnimationFrame is recommended for smoother execution of constantly updating functions while avoiding skipped seconds in the process.

The code also exhibits signs of repetitive patterns, especially within showTime12 and showTime24, which are almost identical. Inlining most of the helper functions would improve code readability without sacrificing clarity.

For a functional example:

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 5

Answer №3

function updateCounter(){
    count++
    function getTimeFormat(){
        let time;
        if(count % 2 === 0){
        time = showTime12();
        }
        else if(count % 2 === 1){
        time = showTime24();
        }
        return time;
    }
    setInterval(getTimeFormat, 0);
}

Huge shoutout to @ggorlen for helping me out!

I decided to create a new function inside the updateCounter function and set that as the parameter for setInterval :)

One of the benefits of being a beginner is learning from your mistakes...

Answer 6

function updateCounter(){
    count++
    function getTimeFormat(){
        let time;
        if(count % 2 === 0){
        time = showTime12();
        }
        else if(count % 2 === 1){
        time = showTime24();
        }
        return time;
    }
    setInterval(getTimeFormat, 0);
}

Huge shoutout to @ggorlen for helping me out!

I decided to create a new function inside the updateCounter function and set that as the parameter for setInterval :)

One of the benefits of being a beginner is learning from your mistakes...

Navigating between two intervals in JavaScript requires following a few simple steps

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble with React testing-library: Why is the file upload empty when testing a PDF file?

Creating webpages dynamically by utilizing Javascript

Display a division upon choosing an option

Issues with React Native imports not functioning properly following recent upgrade

clearing all input fields upon submission in React Native

What is the best way to navigate from a button in NextJS to another page that I have built within the same application?

Using React Material UI icon within an auto complete feature

Error: The program encountered a type error while trying to access the '0' property of an undefined or null reference

Tips for transferring information from one php page to another php page via ajax

Tips for incorporating a multimedia HTML/JavaScript application within C++ programming

Using DraftJS to swap text while preserving formatting

Check to see if modifying the HTML using jQuery results in any errors

Issues with Opera displaying specific characters when using webfonts

Displaying the outcome of an HTML form submission on the current page

JavaScript Comparison of Numerical String Syntax

What causes the toggle effect in my jQuery onclick function to alternate between on and off when the initialization is repeated multiple times?

Having difficulty retrieving the necessary information for manipulating the DOM using Express, Ajax, and Axios

What is the best way to create a mapping function in JavaScript/TypeScript that accepts multiple dynamic variables as parameters?

Typescript: Why Lines Are Not Rendering on Canvas When Using a For-Loop

Tips for incorporating dynamic content into React Material UI expansion panels while maintaining the ability to have only one tab active at a time