JSFiddle - React, Tailwind, and code Playground

HTML

<div id="count"></div>

CSS

div {
    height: 50px;
    width: 50px;
    background-color: lightgray;
}

JavaScript

var i = 3 // global counter;
var counterInterval = null; // this will be the id of the interval so we can stop it

function initNewRound() {
    // do reset stuff

    counterInterval = setInterval(function () { transition() }, 1000); // set interval returns a ID number
}

// we don't need to worry about passing i, because it is global
function transition() {
    if (i > 0) {
        count.innerHTML = i;
    }
    else if (i === 0) {
        count.innerHTML = "Go!";
    }
    else {
        i = 4; // set it to 4, so we can do i-- as one line
        clearInterval(counterInterval); // this stops execution of the interval; we have to specify the id, so you don't kill the main game loop
        count.innerHTML = "";
    }

    i--;
}

initNewRound();