使用jQuery初始化defer函数时出现$ is not defined错误求助

问题根源拆解 #

你碰到的$ is not defined报错，核心原因有两个：

1. 函数调用方式错误：你写的deferVideo(initSlider())会立即执行initSlider函数，而不是把函数本身作为参数传给deferVideo。这就导致initSlider在jQuery还没加载完成时就跑起来了，自然找不到$对象。
2. 依赖判断的潜在问题：你的deferVideo函数里同时检查了window.jQuery和$.skytg24——如果skytg24是依赖jQuery的插件，你得确保它的加载时机在jQuery之后，并且确实初始化完成了，否则这个判断会阻止initSlider执行。

分步修复方案 #

1. 修复函数传递方式

把deferVideo(initSlider())改成deferVideo(initSlider)——传递函数引用，而不是立即执行函数：

<script defer>
var initSlider = function(){
  $('.c-carousel-elezioni').slick({
    dots: false,
    infinite: false,
    speed: 300,
    slidesToShow: 5,
    slidesToScroll: 1,
    autoplay: false,
    prevArrow: '<div class="slick-prev"><i class="fa fa-chevron-left"></i></div>',
    nextArrow: '<div class="slick-next"><i class="fa fa-chevron-right"></i></div>',
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 2,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });
}
// 这里传递函数引用，而非执行函数
deferVideo(initSlider);
</script>

2. 优化依赖判断逻辑

如果skytg24不是initSlider的必需依赖，或者你不确定它的加载状态，可以先简化判断条件，只确保jQuery就绪：

<script>
if (typeof deferVideo === 'undefined'){
  var deferVideo = function(method) {
    // 先只检查jQuery是否加载完成
    if (window.jQuery) {
      method();
    } else {
      setTimeout(function() { deferVideo(method) }, 100);
    }
  }
}
</script>

如果skytg24是必须的，那要确保它的脚本在jQuery之后加载，同时调整判断逻辑明确检查它的存在：

<script>
if (typeof deferVideo === 'undefined'){
  var deferVideo = function(method) {
    if (window.jQuery && typeof $.skytg24 !== 'undefined') {
      method();
    } else {
      setTimeout(function() { deferVideo(method) }, 100);
    }
  }
}
</script>

3. 确认脚本加载顺序

因为你给jQuery和自定义脚本都加了defer属性，浏览器会按它们在HTML中的顺序加载执行。一定要保证jQuery的<script>标签在你的自定义脚本之前，这样jQuery会先加载完成，避免时机问题。

替代方案：用jQuery原生就绪事件 #

如果项目允许，你可以直接用jQuery自带的$(document).ready()来替代自定义的deferVideo，代码更简洁且可靠：

<script defer>
$(function(){
  $('.c-carousel-elezioni').slick({
    // 你的slick配置内容...
  });
});
</script>

注意：这个方式要求jQuery脚本在这个自定义脚本之前加载，并且两者都使用defer（或都不使用），确保执行顺序正确。

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