I have an LWC component that starts a timer (see timer code below).

This works just fine but the LWC is on a record page.  When I navigate to several records sequentially the timers multiply like rabbits.  One per visited record even though the component is visually "gone" between navigations from the list view to the record page.

How can I stop the timer embedded in the LWC when a record page is refreshed or navigated away from? 

In other words, what component event hook can I use from within the LWC itself to stop the timer?

Thanks!


startTimer() {
        let interval = this._loadLock ? (new Date(this._loadLock.Expiration__c)).getTime() - new Date().getTime() : 60000;
        let elem = this.template.querySelector('span.countdown');
        let refreshMe = this._wiredValue;
        let timer = window.setInterval(
            
            function() {
                
                let minutes = Math.floor((interval % (1000 * 60 * 60)) / (1000 * 60));
                let seconds = Math.floor((interval % (1000 * 60)) / 1000);
                elem.innerHTML = minutes + "m " + seconds + "s "; 
                if(interval <= 0) {
                    interval = 60000;
                    refreshApex(refreshMe);
                }                
                else if(interval != 60000 && seconds == 0) {
                    refreshApex(refreshMe);
                }                
                interval = interval - 1000;}, 
            1000);
        this._timerPointer = timer;
    }