clearInterval不生效 重启setInterval后轮播速度翻倍问题如何解决

你遇到的轮播速度变快的核心原因是：重新启动定时器时没有将新生成的定时器ID更新到全局的intervalId变量中。

每次调用setInterval都会返回一个全新的数字ID用于标识当前定时器，你原来的代码只有首次初始化时给intervalId赋了值，后续点击重启定时器时，没有把新的ID更新到intervalId里，导致暂停时调用clearInterval只能清除最早创建的那个定时器，后续生成的新定时器没有被清理，多次点击就会同时存在多个定时器并行运行，轮播触发频率叠加，速度自然越来越快。

仅需要修改点击事件中重启定时器的代码行，将新生成的ID赋值给intervalId即可，修正后的完整JS代码如下：

let i = 0;
var elements = document.querySelectorAll('.mes_elements');

function ma_fonction(){ 
    elements[i].style.opacity = 1;
    for(let j = 0; j < elements.length; j++){  
        if(j!=i){  
            elements[j].style.opacity = 0;
        }
    }
    i++;
    if(i == elements.length){ i = 0; }
}

var lecture = true;
var intervalId = setInterval(ma_fonction, 1500);

document.querySelector('.ma_div').addEventListener('click', function() {
    if(lecture == true){
        clearInterval(intervalId);
        lecture = false;
    }else{ 
        // 核心修改：将新生成的定时器ID赋值给intervalId变量
        intervalId = setInterval(ma_fonction, 1500);
        lecture = true;
    } 
});

你的HTML和CSS代码不需要做任何调整，修改后暂停、播放功能即可正常运行，不会出现速度异常加快的问题。

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