JavaScript设置interrupted为true后While循环仍未终止问题求助

1. 变量拼写错误（最直接的问题） #

你在next()和back()函数里把变量名写成了interruped，但定义的变量是interrupted——少了个t！这导致点击按钮时根本没把interrupted设为true，自然没法触发终止逻辑。

2. while循环的逻辑错误（核心问题） #

JavaScript是单线程的，你的while循环会瞬间跑完100次，一下子把100个setTimeout全部安排进任务队列里。哪怕之后你把interrupted改成true，已经排队的定时器还是会依次执行，因为while循环早就执行完了，不会再去检查interrupted的状态。

修正后的代码 #

var carousel = document.getElementById("carousel");
var width = carousel.offsetWidth;
var scrollDelay = 2.5; // 轮播间隔（秒）
var interrupted = false;
var autoScrollTimer = null; // 保存定时器ID，方便清除

function next() {
    carousel.scrollBy({ 
        left: width, 
        behavior: 'smooth' 
    });
    interrupted = true; // 修正拼写错误
    clearTimeout(autoScrollTimer); // 清除当前等待的定时器
}

function back() {
    carousel.scrollBy({ 
        left: (width * -1), 
        behavior: 'smooth'
    });
    interrupted = true; // 修正拼写错误
    clearTimeout(autoScrollTimer); // 清除当前等待的定时器
}

// 改用递归方式实现自动滚动
function startAutoScroll() {
    if (!interrupted) {
        autoScrollTimer = setTimeout(function() {
            next();
            // 执行完一次滚动后，若未中断则继续
            if (!interrupted) {
                startAutoScroll();
            }
        }, scrollDelay * 1000);
    }
}

// 初始化启动自动滚动
startAutoScroll();

修正逻辑说明 #

• 先修复了变量拼写错误，确保点击按钮时能正确标记interrupted为true。
• 去掉了while循环，改用递归调用：每次执行完自动滚动后，检查interrupted状态，只有未中断时才设置下一个定时器。
• 新增autoScrollTimer变量保存定时器ID，点击按钮时直接清除当前等待的定时器，避免已经安排好的滚动继续执行。

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