iOS 18更新后Safari中废弃jQuery Ajax调用API超时错误激增

问题核心梳理 #

• iOS 18推送后，iPhone用户出现页面频繁重载、弹出“A problem repeatedly occurred…”错误
• 搜索栏实时搜索的API调用中，95%的超时错误来自iPhone（仅占全站流量40%）
• 触发场景：用户点击搜索/回车引发页面加载前，实时搜索的jQuery Ajax调用在收到响应前被废弃，网络无响应记录；正常防抖后响应时间150-200ms
• 已尝试方案：修改async: true无效，跨域无法用abort终止请求，现有Stack Overflow方案均不生效

针对性解决建议 #

• 优化防抖与请求生命周期管理
  调整防抖逻辑，在用户触发页面级搜索操作时，前端标记当前pending的实时搜索请求为"废弃状态"，即使后续收到响应也直接丢弃，不做任何处理；同时将防抖间隔从现有值提升至250ms，减少短时间内的请求堆积，避免iOS 18 Safari的请求队列异常。

• 替换jQuery Ajax为Fetch API + AbortController
  跨域场景下，AbortController可以实现请求终止，完全替代jQuery的abort方法，适配iOS 18 Safari：

  // 初始化控制器
  let searchController = null;
  
  function triggerRealTimeSearch(keyword) {
    // 先终止上一次pending的请求
    if (searchController) {
      searchController.abort();
    }
    searchController = new AbortController();
    const signal = searchController.signal;
  
    fetch('https://your-search-api.com/api', {
      method: 'POST',
      signal: signal,
      headers: {
        'Content-Type': 'application/json'
      },
      // 携带搜索关键词
      body: JSON.stringify({ keyword })
    })
    .then(res => res.json())
    .then(data => {
      // 处理搜索结果
      renderSearchSuggestion(data);
    })
    .catch(err => {
      if (err.name !== 'AbortError') {
        // 处理真正的请求错误
        handleSearchError(err);
      }
    });
  }
  
  // 用户触发页面搜索时调用
  function triggerPageSearch() {
    if (searchController) {
      searchController.abort();
    }
    // 执行页面跳转/重载逻辑
    window.location.href = `/search?q=${encodeURIComponent(input.value)}`;
  }
  

• 添加请求超时与资源清理
  给实时搜索请求设置300ms的超时时间，超时后主动终止请求并清理相关资源；同时在页面beforeunload事件中，终止所有pending的搜索请求，避免iOS 18 Safari因未完成请求触发页面错误。

• iOS 18 Safari专属兼容
  通过用户代理检测判断是否为iOS 18的Safari用户，对这类用户单独调整实时搜索策略：仅在用户输入停止300ms后发起请求，而非边输入边触发；同时禁用实时搜索的重试逻辑，减少请求数量。

• 后端配合优化
  建议后端针对实时搜索接口做针对性优化：比如缓存热门关键词结果，将响应时间压缩至100ms以内；同时支持前端传递请求唯一标识，后端可根据标识判断请求是否已被废弃，直接终止处理，减少无效资源消耗。

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