jQuery 2.2.4与3.7.1执行顺序差异及兼容方案问询

差异原因分析 #

1. jQuery 2.x 与 3.x 的核心行为变化 #

jQuery 3.0 对 $(document).ready() 的处理逻辑做了关键调整：

• jQuery 2.x：若 DOM 已处于就绪状态，调用 $(document).ready(fn) 会同步立即执行回调函数 fn。
• jQuery 3.x：无论 DOM 是否已就绪，所有 $(document).ready(fn) 的回调都会异步延迟到下一个事件循环 tick执行（通过 setTimeout 实现）。

这直接导致了输出顺序反转：

• 在 jQuery 2.x 中，picker.js 加载后，其内部的 $(document).ready 回调同步执行，先输出 "picker"，再执行 $.getScript 的回调输出 "helper"。
• 在 jQuery 3.x 中，picker.js 的回调被延迟到下一个 tick，而 $.getScript 的回调立即执行，因此先输出 "helper"，再输出 "picker"。

2. 原生 DOMContentLoaded 失效的原因 #

带 defer 属性的脚本会在文档解析完成后、DOMContentLoaded 事件触发之前执行：

• helper.js 中添加的 DOMContentLoaded 监听器会在事件触发时正常执行 init。
• 但 init 加载 picker.js 时，DOMContentLoaded 事件已经触发完毕，picker.js 中新增的同类型监听器永远不会被触发，因此无法输出 "picker"。

可行解决方案（最小改动） #

以下方案均不涉及禁用的三种操作，仅需少量代码调整：

方案一：仅修改 helper.js，利用 jQuery 就绪 Promise #

通过 jQuery.ready.promise() 等待所有就绪回调执行完毕：

// helper.js 修改后的代码
$(document).ready(function init() {
  $.getScript('picker.js')
    .then(() => jQuery.ready.promise())
    .then(() => {
      initPicker();
      console.log("helper");
    });
});

原理：jQuery.ready.promise() 返回的延迟对象会在所有已注册的 $(document).ready 回调执行完成后 resolve，确保 "picker" 先输出，再执行后续逻辑。兼容所有 jQuery 版本。

方案二：微调 picker.js + 修改 helper.js，自定义事件同步 #

通过自定义事件明确标记 picker 初始化完成：

1. 修改 picker.js（仅添加一行代码）：

// picker.js 修改后的代码
$(document).ready(function() {
  cp.picker = ...; // 保留原有定义逻辑
  console.log("picker");
  // 触发自定义事件通知初始化完成
  $(document).trigger('picker:ready');
});

2. 修改 helper.js：

// helper.js 修改后的代码
$(document).ready(function init() {
  $.getScript('picker.js', () => {
    // 监听自定义事件，确保 picker 就绪后再执行
    $(document).one('picker:ready', () => {
      initPicker();
      console.log("helper");
    });
  });
});

原理：picker.js 在就绪回调执行完毕后触发自定义事件，helper.js 监听该事件，确保后续逻辑仅在 picker 完全初始化后执行。逻辑更直观，无版本兼容问题。

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