如何检测JS源不可访问并切换备用服务器加载？

当然可以用jQuery搞定这个需求！第三方资源不稳定确实头疼，下面给你拆解实现思路和具体代码：

核心思路 #

我们不直接用<script>标签硬引入，而是借助jQuery的$.getScript()方法——它不仅能加载并执行脚本，还能监听加载的成功/失败状态，完美适配超时、4XX/5XX这类异常场景。一旦主服务器加载失败，就自动切换到备用服务器地址重试。

具体实现代码 #

方案一：基于jQuery的$.getScript()（推荐） #

这个方案简洁直接，利用jQuery的AJAX回调机制处理所有异常：

// 1. 配置全局AJAX超时时间（这里设为你要求的200ms）
$.ajaxSetup({
  timeout: 200
});

// 2. 定义主服务器和备用服务器的脚本地址
const primaryScriptUrl = 'https://third-party-main.com/your-dynamic-script.js';
const fallbackScriptUrl = 'https://third-party-backup.com/your-dynamic-script.js';

// 3. 封装加载函数，支持自动 fallback
function loadTargetScript(url, callback) {
  $.getScript(url)
    .done(function() {
      console.log(`✅ 成功加载脚本: ${url}`);
      // 脚本加载完成后，执行你的业务初始化逻辑
      if (typeof callback === 'function') {
        callback();
      }
    })
    .fail(function(jqxhr, settings, exception) {
      console.error(`❌ 加载脚本失败: ${url}，错误原因: ${exception}`);
      
      // 如果是主地址失败，自动尝试备用地址
      if (url === primaryScriptUrl) {
        console.log('🔄 切换到备用服务器加载...');
        loadTargetScript(fallbackScriptUrl, callback);
      } else {
        // 备用地址也失败了，这里可以加错误提示或降级处理
        console.error('💥 主备服务器均无法加载脚本，请检查服务状态');
      }
    });
}

// 4. 调用加载函数，传入初始化回调
loadTargetScript(primaryScriptUrl, function() {
  // 比如初始化依赖该脚本的功能
  initYourFeature();
});

细节说明 #

• 超时判断：通过$.ajaxSetup()设置全局超时，超过200ms会直接触发fail回调，异常信息会包含timeout关键词
• HTTP错误处理：4XX/5XX这类响应状态码也会触发fail回调，你可以通过jqxhr.status获取具体状态码（比如jqxhr.status === 404时做特殊处理）
• 动态脚本适配：只要备用服务器能生成和主服务器完全一致的动态脚本（包括参数、逻辑），这个方案就能完美适配，不需要你托管脚本

方案二：原生JS+定时器（无需jQuery） #

如果有时候你不想依赖jQuery，也可以用原生JS手动创建script标签，结合定时器判断超时：

const primaryUrl = 'https://third-party-main.com/your-dynamic-script.js';
const fallbackUrl = 'https://third-party-backup.com/your-dynamic-script.js';
const timeoutLimit = 200;

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    let timeoutTimer;

    // 超时处理
    timeoutTimer = setTimeout(() => {
      script.remove();
      reject(new Error(`加载超时: ${url}`));
    }, timeoutLimit);

    // 加载成功回调
    script.onload = () => {
      clearTimeout(timeoutTimer);
      resolve(`脚本加载成功: ${url}`);
    };

    // 加载失败回调（包括4XX/5XX错误）
    script.onerror = () => {
      clearTimeout(timeoutTimer);
      script.remove();
      reject(new Error(`加载失败: ${url}`));
    };

    script.src = url;
    document.head.appendChild(script);
  });
}

// 执行加载逻辑
loadScript(primaryUrl)
  .then(console.log)
  .catch(err => {
    console.error(err.message);
    return loadScript(fallbackUrl);
  })
  .then(console.log)
  .catch(finalErr => {
    console.error('所有服务器加载失败:', finalErr.message);
  });

总结 #

jQuery完全能满足你的需求，核心就是利用$.getScript()的回调机制捕获加载异常，然后自动切换到备用地址。如果备用服务器能提供一致的动态脚本，这个方案就能稳定解决第三方资源不可用的问题。

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