在JavaScript中如何正确停止setInterval定时器？

问题核心原因 #

• 你没有存储setInterval返回的定时器ID，clearInterval()方法要求传入的是定时器ID而非执行的函数名
• 停止条件的判断逻辑写在了点击事件回调里，点击事件仅在你点击箭头时触发一次，不会随着定时器每10ms的执行自动校验，永远触发不到停止逻辑

修正后代码 #

const icons = document.querySelectorAll(".icons i");
const imageDiv = document.querySelector(".imageDiv");

let positionRight = 0;
// 声明变量存储定时器ID
let slideTimer = null;

function addPositionRight () {
    positionRight += 1;
    imageDiv.style.right = `${positionRight}%`;
    // 停止逻辑放在定时器执行的函数内，每一次移动都做判断
    if (positionRight >= 100) {
        clearInterval(slideTimer);
        // 复位定时器变量，避免后续点击异常
        slideTimer = null;
        // 如果是循环轮播可在这里加 positionRight = 0;
    }
}

icons[1].onclick = () => {
    // 点击时先清掉已有定时器，避免多次点击生成多个定时器导致速度变快
    if(slideTimer) clearInterval(slideTimer);
    slideTimer = setInterval(addPositionRight, 10);
}

额外优化建议 #

• 停止条件建议用>=100而非===100，避免后续调整步长时刚好跳过100的阈值，导致定时器永远无法停止
• 定时器停止后建议将存储ID的变量复位为null，方便后续逻辑判断定时器是否在运行中

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