如何实现JavaScript无限循环？WordPress滑块需每2秒检测slick-current类

核心思路 #

别用无限for循环（会阻塞浏览器主线程导致页面假死），改用setInterval实现异步定时检测——它会每隔指定时间重复执行目标函数，直到你主动停止，完美匹配“无限循环检测”的需求。

改造后的代码示例 #

window.onload = function() {
    // 封装检测逻辑为独立函数
    function checkCurrentSlide() {
        // 直接获取带slick-current类的当前滑块（比硬编码ID更灵活）
        const currentSlide = document.querySelector('.slick-current');
        
        if (currentSlide) {
            console.log(`当前激活滑块ID: ${currentSlide.id}`);
            // 示例：针对特定滑块执行逻辑
            if (currentSlide.id === 'slick-slide21') {
                console.log('julien');
            }
            // 这里可以添加更多滑块对应的文本展示逻辑
        }
    }

    // 每2000毫秒（2秒）执行一次检测，保存定时器ID用于后续停止
    const slideCheckTimer = setInterval(checkCurrentSlide, 2000);

    // 可选：页面卸载时清除定时器，避免内存泄漏
    window.addEventListener('beforeunload', () => {
        clearInterval(slideCheckTimer);
    });
};

关键优化说明 #

• 动态获取滑块：用.slick-current选择器直接定位当前激活滑块，适配滑块ID动态变化的场景，不用硬编码固定ID。
• 独立函数封装：让检测逻辑更清晰，方便后续修改或复用。
• 保留定时器ID：需要停止循环时，调用clearInterval(slideCheckTimer)即可，比如滑块组件销毁后。

为什么不用无限for循环？ #

普通无限for循环（如for(;;){ ... }）会同步占用主线程，浏览器无法处理页面渲染、用户交互等任务，直接导致页面卡死，完全不适合前端页面的定时检测场景。

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