仅Firefox与Safari中Ajax请求Response触发TypeError问题排查

你提到在使用Ajax获取设备监控数据并缓存选择器时，仅在Firefox和Safari中触发TypeError，而其他浏览器正常。结合你给出的代码片段，我帮你梳理下可能的问题点和对应的解决思路：

1. 先修复基础语法隐患 #

看你提供的代码，有几个语法细节可能是跨浏览器差异的根源——Firefox和Safari对自动分号插入（ASI）的处理比Chrome更严格：

$updateRate = 300000; 
$devices_temperature_integer = []  // 这里缺少分号！
$devices_temperature_decimal = [] 
$devices_humidity = [] 
$devices_luminosity = [] 
$devices_atm_pressure = [] 

$('.monitoring.weather_monitoring').ready(function() { 
    cacheInfo(); 
    getInfo(); 
    $allTimer = setInterval( function() { 
        getInfo(); 
    }, $updateRate ); 
    return false; 
}); 

function cacheInfo() { ... }

• 给每个变量声明补上分号，避免浏览器解析时出现歧义；
• 不要用全局变量（未加var/let/const），全局变量污染很容易在不同浏览器引发不一致行为，建议用const（不需要重新赋值的场景）或let声明：

修正后的基础代码：

const updateRate = 300000; 
const devicesTemperatureInteger = [];
const devicesTemperatureDecimal = [];
const devicesHumidity = [];
const devicesLuminosity = [];
const devicesAtmPressure = [];

$(document).ready(function() { 
    // 先确认目标元素存在，避免后续操作无意义
    if ($('.monitoring.weather_monitoring').length === 0) {
        console.error("监控容器元素未找到");
        return;
    }
    cacheInfo(); 
    getInfo(); 
    const allTimer = setInterval(getInfo, updateRate); 
    
    // 页面卸载时清理定时器，避免内存泄漏
    $(window).on('unload', () => clearInterval(allTimer));
}); 

function cacheInfo() { 
    // 你的缓存逻辑示例：按设备ID存储选择器
    $('.device-item').each(function() {
        const deviceId = $(this).data('device-id');
        devicesTemperatureInteger[deviceId] = $(this).find('.temp-int');
        // 验证选择器是否存在，提前排查问题
        if (!devicesTemperatureInteger[deviceId].length) {
            console.warn(`设备${deviceId}的温度整数选择器未找到`);
        }
    });
}

2. 排查Ajax响应的跨浏览器差异 #

TypeError最常见的触发场景是解析响应数据时出错，Firefox和Safari对响应类型、编码的处理和Chrome有差异：

• 确保getInfo()里的Ajax请求明确设置了dataType: 'json'，如果服务器返回的Content-Type不是application/json，这两个浏览器不会自动解析为JSON对象，后续访问response.xxx就会报错；
• 在success回调里先验证响应格式，避免处理无效数据：

function getInfo() {
    $.ajax({
        url: '/your-api-endpoint',
        dataType: 'json',
        success: function(response) {
            // 先验证响应是否有效
            if (!response || typeof response !== 'object') {
                console.error("响应格式无效");
                return;
            }
            // 后续处理缓存的选择器和数据
            Object.keys(response.devices).forEach(deviceId => {
                if (devicesTemperatureInteger[deviceId]) {
                    devicesTemperatureInteger[deviceId].text(response.devices[deviceId].tempInt);
                }
            });
        },
        error: function(xhr, status, error) {
            console.error("Ajax请求失败：", error);
            // 出错时可以暂停定时器，避免重复请求
            clearInterval(allTimer);
        }
    });
}

3. 缓存选择器的作用域与时机问题 #

你用了$('.monitoring.weather_monitoring').ready()，这个写法不如全局的$(document).ready()可靠——如果.monitoring.weather_monitoring是动态加载的，这个ready事件可能根本不会触发，导致缓存逻辑没执行，后续操作缓存数组时就会触发TypeError。

另外，缓存选择器时一定要确保目标DOM元素已经存在，建议在cacheInfo()里加一层存在性校验，就像上面示例里那样。

调试小技巧 #

• 打开Firefox/Safari的开发者工具控制台，看TypeError的具体提示（比如“Cannot read property 'tempInt' of undefined”），直接定位出错的代码行；
• 在getInfo()和cacheInfo()里加console.log，打印关键变量（比如响应数据、缓存的选择器），对比不同浏览器里的输出差异。

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