I'm making a rookie second stopwatch here only using setInterval.

I tried to visually stop the stopwatch from counting up by artificially overriding the innerHTML of the timer display, which I know is pretty dumb.

When I un-pause the stopwatch, the display increments more than one count every second, which is quite interesting. I'd like to know why this happens - is it because the countedTime still runs in the event queue, while the startStopwatch() refreshes the display every second?

Is this what they call an async callback?

var countedTime = 0
var paused

// specify HTML areas for components
const displayArea = document.querySelector("#timer-display")
const countUpButton = document.querySelector("#count-up-button")
const pauseButton = document.querySelector("#pause-button")


// increment timer by 1 second 

function countUp() {
    if (paused === false) {
    countedTime += 1
    displayArea.innerHTML = countedTime
    }
}

// function to begin counting up

function startStopwatch() {
    paused = false
    setInterval(countUp, 1000)
}

countUpButton.addEventListener("click", startStopwatch);

// add pause button

function pauseStopwatch() {
    paused = true
}

pauseButton.addEventListener("click", pauseStopwatch)