如何避免jQuery扩展未定义就调用的偶发竞态条件错误？

你遇到的问题核心是：虽然代码里扩展定义在DOM就绪回调之前，但偶尔会出现自执行函数执行时jQuery尚未完全初始化，或者脚本加载顺序异常导致$.myFunc还未被定义就被调用的情况。以下是几种可靠的解决办法：

方案一：将扩展定义与调用统一放到jQuery就绪回调内 #

把扩展定义和调用逻辑都包裹在jQuery(function($) { ... })（即$(function(){...})）中，确保所有操作都在jQuery完全就绪后执行，从根源避免竞态：

jQuery(function($) {
  // 定义扩展方法
  if (!$.myFunc) {
    $.extend({
      myFunc: function(params) { 
        // 方法逻辑
      }
    });
  }

  // 直接调用方法
  $.myFunc(blahblah);
});

方案二：确保自执行函数等待jQuery加载完成 #

如果必须保留自执行函数的形式，可以添加检查逻辑，确保jQuery可用后再定义扩展：

(function defineMyExtension() {
  // 检查jQuery是否已加载
  if (typeof jQuery === 'undefined') {
    // 未加载则延迟重试
    setTimeout(defineMyExtension, 50);
    return;
  }

  const $ = jQuery;
  if (!$.myFunc) {
    $.extend({
      myFunc: function(params) { 
        // 方法逻辑
      }
    });
  }
})();

// 调用仍放在DOM就绪回调
$(function(){
  $.myFunc(blahblah);
});

方案三：将调用逻辑嵌入扩展定义的作用域内 #

把DOM就绪回调的调用逻辑放到扩展定义的自执行函数内部，确保扩展定义完成后才注册调用回调：

(function ($) {
  if (!$.myFunc) {
    $.extend({
      myFunc: function(params) { 
        // 方法逻辑
      }
    });
  }

  // 在同一作用域内注册DOM就绪后的调用
  $(function(){
    $.myFunc(blahblah);
  });
})(jQuery);

额外注意事项 #

• 检查脚本的加载属性：如果你的JS文件使用了async或defer属性，可能会打乱与jQuery的加载顺序，确保该脚本在jQuery之后加载，或者去掉异步属性。
• 避免jQuery被重复加载：如果页面中存在多次加载jQuery的情况，可能会覆盖已定义的扩展方法，需排查此类问题。

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