如何在现有AJAX定时刷新div功能中添加定时检查高度并切换类的功能？

嘿，我来帮你把这两个功能完美整合到一起～ 你现有的AJAX刷新逻辑已经很顺畅了，咱们可以把高度检查的逻辑和它合并到同一个定时器里，避免开多个重复的定时任务，性能更友好。

先回顾下你原有的AJAX刷新代码：

jQuery(document).ready(function($) { 
    var auto_refresh = setInterval(function() { 
        $.ajax({ 
            success: function(data) { 
                var result = $('<div />').append(data).find('div#vs').html(); 
                $('div#vs').html(result); 
            } 
        }) 
    }, 5000); // 每5秒刷新一次
})

接下来把高度检查切换类的逻辑整合进去，我把这部分封装成了独立函数，方便你后续修改判断条件：

jQuery(document).ready(function($) { 
    var auto_refresh = setInterval(function() { 
        // 执行AJAX刷新操作
        $.ajax({ 
            success: function(data) { 
                var result = $('<div />').append(data).find('div#vs').html(); 
                $('div#vs').html(result); 

                // 刷新完成后立即检查div高度并切换类
                checkVsDivHeight();
            } 
        });

        // 如果你希望不管AJAX是否完成，每5秒固定检查一次高度，就把checkVsDivHeight()移到这里
        // checkVsDivHeight();
    }, 5000); 

    // 封装高度检查与类切换的函数
    function checkVsDivHeight() {
        const $vsDiv = $('div#vs');
        // 这里替换成你的实际高度判断条件，比如高度超过300px时触发
        const shouldToggle = $vsDiv.height() > 300;
        
        // 用toggleClass可以一键完成"满足条件加类，不满足移除"的操作
        $vsDiv.toggleClass('your-target-class', shouldToggle);
        
        // 如果你需要更复杂的逻辑，也可以用if-else：
        // if (shouldToggle) {
        //     $vsDiv.addClass('your-target-class');
        // } else {
        //     $vsDiv.removeClass('your-target-class');
        // }
    }
})

小提示： #

• 两种高度检查时机可选：放在AJAX的success回调里，是刷新完成后立即验证高度；放在定时器外层，则是每5秒固定检查一次，不管AJAX有没有完成，你可以根据业务需求选。
• toggleClass的第二个参数是个布尔值，直接控制类的添加/移除，比写if-else更简洁优雅～

这样两个功能就无缝结合啦，既保留了原有的局部刷新，又实现了高度驱动的类切换效果😉

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