How do I switch the running codes using the IF?

Bear with me, I just started learning JS yesterday trying to make a HTML clock by putting multiple tutorials' results together.

I made two looping animations using 2 arrays, with the intent of switching between arrays depending on if it's earlier or later than 8pm. I would like for my code to constantly check if it's 8pm every X amount of seconds, and only re-run the script if the IF result or output is different than what it currently is.

const now = new Date();
if (now.getHours() > 20) { // Time checker!!!!!
    var hat = ['A','B','C','D'], 
        a = -1;
    (function f(){
        a = (a + 1) % hat.length;
        const hatformatted = `${(hat[ a ])}`;
        document.querySelector(".main").textContent = hatformatted;
        setTimeout(f, 1000);
    })();    
} else {
        var hat = ['1','2','3','4'], 
        a = -1;
    (function f(){
        a = (a + 1) % hat.length;
        const hatformatted = `${(hat[ a ])}`;
        document.querySelector(".main").textContent = hatformatted;
        setTimeout(f, 1000);
    })();
}

I have tried setInterval however it re-runs the script even if the IF result has not changed, and messes up the animation.

I.E - if it's 6pm, it tries to play the animation from the start every 1 second and the frames get messed up.

Any advice or help would be great, thanks!