页面加载启动的setInterval无法停止，clearInterval无效求助

你的代码问题出在作用域上：stop函数是定义在rotate函数内部的局部函数，而页面按钮的onclick="stop()"是在全局作用域下调用的，根本找不到这个内部的stop函数，自然无法执行clearInterval来停止定时器。

下面给你两种可行的修正方案：

方案一：使用全局变量存储定时器ID（适合新手快速理解） #

把定时器ID和停止函数都放到全局作用域中，这样按钮能正确调用停止逻辑：

<body onload="rotate('target')">
    <h1 id="target">abcdefghijklmnopqrstuvwkyz</h1>
    <button onclick="stopRotation()">Stop</button>
</body>

// 全局变量存储定时器ID
let intervalId;

function rotate(id) {
    let element = document.getElementById(id);
    let textNode = element.childNodes[0];
    let text = textNode.data;

    // 把定时器ID赋值给全局变量
    intervalId = setInterval(display, 500);
    
    function display() {
        text = text[text.length - 1] + text.substring(0, text.length - 1);
        textNode.data = text;
    };
}

// 全局定义停止函数
function stopRotation() {
    clearInterval(intervalId);
}

方案二：使用事件监听器（更规范的写法） #

避免使用内联onclick和全局变量，通过DOM事件绑定的方式实现，代码结构更清晰：

<body>
    <h1 id="target">abcdefghijklmnopqrstuvwkyz</h1>
    <button id="stopBtn">Stop</button>
</body>

// 页面加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
    const targetEl = document.getElementById('target');
    const stopBtn = document.getElementById('stopBtn');
    let textNode = targetEl.childNodes[0];
    let text = textNode.data;
    let intervalId;

    function display() {
        text = text[text.length - 1] + text.substring(0, text.length - 1);
        textNode.data = text;
    }

    // 启动旋转定时器
    intervalId = setInterval(display, 500);

    // 给停止按钮绑定点击事件
    stopBtn.addEventListener('click', function() {
        clearInterval(intervalId);
    });
});

核心逻辑：只要确保执行clearInterval时，能拿到setInterval返回的定时器ID，并且触发停止的函数能被正确调用，就能解决问题。

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