指定ID后ClearInterval()仍失效，倒计时结束无法清除定时器

我用setInterval调用两个函数来反复显示/隐藏滚动条，同时设置了每秒执行的gettimer倒计时函数。但倒计时结束时，调用clearInterval清除滚动条定时器的操作失效。如果把setInterval和clearInterval移到gettimer外部就能正常工作，请帮忙排查问题。

原代码 #

let M1, M2
function ShowScrollBar(){
    ScrollContainer.classList.add('show-scroll-container')
}

function TimeShowscrollBar(){
    M1 = setInterval(ShowScrollBar,3000)
}

function RemoveScrollBar(){
    ScrollContainer.classList.remove('show-scroll-container')
}

function TimeRemovecrollBar(){
    M2 = setInterval(RemoveScrollBar,6000)
}

function ClearTimeShowscrollBar(){
    clearInterval(M1)
}

function ClearTimeRemovecrollBar(){
    clearInterval(M2)
}

function gettimer(){
const futureTimems = ClosingDate.getTime()
const presentTimems = new Date().getTime()
const RemainingTimeSec = (futureTimems-presentTimems)/1000
if(RemainingTimeSec>=0){    
    window.addEventListener('DOMContentLoaded', function(){
        popup.classList.add('showpopup')
        popup.classList.remove('popup')
       
    })
}

ClosePopupBtn.addEventListener('click',function(){
    popup.classList.remove('showpopup')
    popup.classList.add('popup')
    TimeShowscrollBar()
    TimeRemovecrollBar()
       
})

if (RemainingTimeSec<=0){
    clearInterval(countdown)
//Functions with clearInterval not working here
    ClearTimeShowscrollBar()
    ClearTimeRemovecrollBar()
    timing.forEach(function(contenu, MVindex){
        contenu.innerHTML = '00'
    })
    timingS.forEach(function(contenu, MVindex){
        contenu.innerHTML = '00'
    })
    popup.classList.remove('showpopup')
    popup.classList.add('popup')  
}
}
let countdown = setInterval(gettimer,1000)
gettimer()

问题原因 #

核心问题是事件重复绑定：

• gettimer每秒执行一次，每次执行都会给ClosePopupBtn新增一个点击事件监听。
• 用户点击关闭弹窗时，会触发所有绑定的点击事件，导致TimeShowscrollBar()和TimeRemovecrollBar()被调用多次，M1和M2会被多次赋值为新的定时器ID。
• 倒计时结束时，clearInterval(M1/M2)只能清除最后一次创建的定时器，之前创建的定时器依然在后台运行，所以看起来清除操作失效。
• 另外，DOMContentLoaded事件也被重复绑定，这属于无效操作，因为该事件只会触发一次。

修复方案 #

把事件监听的绑定逻辑移到gettimer外部，确保只绑定一次：

let M1, M2, countdown

function ShowScrollBar(){
    ScrollContainer.classList.add('show-scroll-container')
}

function TimeShowscrollBar(){
    // 先清除旧定时器再创建新的，避免重复
    if (M1) clearInterval(M1)
    M1 = setInterval(ShowScrollBar,3000)
}

function RemoveScrollBar(){
    ScrollContainer.classList.remove('show-scroll-container')
}

function TimeRemovecrollBar(){
    // 先清除旧定时器再创建新的，避免重复
    if (M2) clearInterval(M2)
    M2 = setInterval(RemoveScrollBar,6000)
}

function ClearTimeShowscrollBar(){
    clearInterval(M1)
    M1 = null // 清空ID，避免后续误操作
}

function ClearTimeRemovecrollBar(){
    clearInterval(M2)
    M2 = null // 清空ID，避免后续误操作
}

function gettimer(){
    const futureTimems = ClosingDate.getTime()
    const presentTimems = new Date().getTime()
    const RemainingTimeSec = (futureTimems - presentTimems)/1000

    if(RemainingTimeSec >= 0){    
        // 直接判断页面加载状态处理弹窗，无需重复绑定事件
        if (document.readyState === "complete" || document.readyState === "interactive") {
            popup.classList.add('showpopup')
            popup.classList.remove('popup')
        }
    }

    if (RemainingTimeSec <= 0){
        clearInterval(countdown)
        ClearTimeShowscrollBar()
        ClearTimeRemovecrollBar()
        timing.forEach(contenu => contenu.innerHTML = '00')
        timingS.forEach(contenu => contenu.innerHTML = '00')
        popup.classList.remove('showpopup')
        popup.classList.add('popup')  
    }
}

// 页面加载完成后初始化弹窗和绑定事件，只执行一次
window.addEventListener('DOMContentLoaded', function(){
    popup.classList.add('showpopup')
    popup.classList.remove('popup')

    ClosePopupBtn.addEventListener('click',function(){
        popup.classList.remove('showpopup')
        popup.classList.add('popup')
        TimeShowscrollBar()
        TimeRemovecrollBar()
    })
})

countdown = setInterval(gettimer,1000)
gettimer()

关键优化点 #

1. 事件监听只绑定一次：把ClosePopupBtn的点击事件和DOMContentLoaded事件移到gettimer外部，避免重复绑定导致的多次定时器创建。
2. 创建定时器前清除旧实例：在启动新定时器前先检查并清除旧的，防止同一逻辑多个定时器同时运行。
3. 清除后清空定时器ID：避免后续代码误操作已失效的定时器ID。
4. 简化弹窗显示逻辑：直接判断页面加载状态处理弹窗，无需重复绑定DOMContentLoaded事件。

内容的提问来源于stack exchange，提问作者Mehdi