如何让setInterval仅执行一次？按钮点击后定时器重复触发问题

问题根源 #

你当前的代码在点击按钮时，每次都会调用setInterval创建新的定时器，但没有把新的定时器实例赋值回原来的interval变量，旧定时器虽然被清除，但新定时器没有被记录，导致多次点击后多个定时器同时运行，重复执行setRandomPlay。

修正后的代码 #

$(".parents > li > div").each(function(idx, item) {
    // 在外层作用域保存定时器实例，确保每次操作的是同一个变量
    let interval = setInterval(setRandomPlay, 2500);

    function setRandomPlay() {
        const activeBtns = $(item).find('.swiper-slide-active button');
        const random = Math.floor(Math.random() * activeBtns.length);
        // 仅移除'on'类，避免清空按钮原有样式类
        activeBtns.removeClass('on');
        activeBtns.eq(random).addClass('on');
    }

    // 用事件委托绑定点击，适配slide切换后的按钮
    $(item).on('click', '.swiper-slide-active button', function(e) {
        const $clickedBtn = $(this);
        const activeBtns = $(item).find('.swiper-slide-active button');
        
        // 清空所有激活slide按钮的'on'类，给当前点击的按钮加上
        activeBtns.removeClass('on');
        $clickedBtn.addClass('on');

        // 先清除现有定时器，再重新创建并赋值回interval
        clearInterval(interval);
        interval = setInterval(setRandomPlay, 2500);
    });
});

关键改动说明 #

1. 复用定时器变量：每次重启定时器时，将新的setInterval返回值赋值回interval，确保下次点击能精准清除当前运行的定时器，杜绝多个定时器同时存在。
2. 修复类操作错误：原代码中removeClass()会清空按钮所有类，改为仅移除'on'类，保留按钮原有样式。
3. 优化事件绑定：用事件委托绑定点击逻辑，适配Swiper切换slide后新激活的按钮，避免绑定失效。
4. 简化点击逻辑：点击时直接给当前按钮加on类、清空其他按钮的on类，去掉冗余的条件判断，逻辑更清晰。

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