Javascript 如何在脚本标记中正确使用延迟/异步属性

我在所有外部js文件中使用“defer”属性运行以下代码，但在脚本标记中使用defer属性时不会加载Owl Carousel。它还显示未定义错误“$”。如果我从脚本标记中删除defer属性，那么一切都可以正常工作，没有任何错误。 注意：由于某些原因，我无法将owl转盘演示脚本放在另一个外部js文件中。有没有办法解决这个问题。也不仅仅是猫头鹰旋转木马，如果我把

<script>
    $(document).ready(function(){
      alert('hi');
  });
</script>

$（文档）.ready（函数（）{
警报（“hi”）；
});

它也不起作用

延迟属性
.项目{
背景：#ff3f4d；
}
氢{
颜色：#FFF；
文本对齐：居中；
填充：5rem0；
保证金：0；
字体：斜体；
字体大小：300；
}
@仅介质屏幕和（最小宽度：40.0625em）{
氢{
字体大小：2.3125rem；
}
}
$（文档）.ready（函数（）{
var owl=$（'.owl carousel'）；
猫头鹰旋转木马({
差额：10，
循环：对，
响应：{
0: {
项目：1
},
600: {
项目：2
},
1000: {
项目：3
}
}
});
});
你好，世界！
刷卡
拖曳
反应敏捷的
CSS3
快速的
容易的
自由的
可升级
大量的选择
无穷
自动宽度

如果要在外部脚本中使用

延迟

属性，则应使用

窗口。onload

事件，因为它在加载包括延迟脚本在内的所有页面后激发。尝试：

延迟属性
.项目{
背景：#ff3f4d；
}
氢{
颜色：#FFF；
文本对齐：居中；
填充：5rem0；
保证金：0；
字体：斜体；
字体大小：300；
}
@仅介质屏幕和（最小宽度：40.0625em）{
氢{
字体大小：2.3125rem；
}
}
window.onload=函数（）{
var owl=$（'.owl carousel'）；
猫头鹰旋转木马({
差额：10，
循环：对，
响应：{
0: {
项目：1
},
600: {
项目：2
},
1000: {
项目：3
}
}
});
};
你好，世界！
刷卡
拖曳
反应敏捷的
CSS3
快速的
容易的
自由的
可升级
大量的选择
无穷
自动宽度

通过添加

defer

，在页面加载完成后，您正在加载jQuery和Owl。但是，您在

块中编写的代码不会延迟，而是依赖于jQuery/OwlCarousel。您正在尝试在加载jQuery和OwlCarousel之前使用它们。最简单的解决方案是将代码移动到外部文件，并将其延迟。关于“注意：由于某些原因，我不能将owl转盘演示脚本放在另一个外部js文件中”，这听起来不太合适。这更可能是您要解决的问题。当我们使用“延迟”属性时，是否不允许有内联脚本标记？正确

defer

要求

标记也具有

src

属性。如果内联代码的标记具有

src

属性，则内联代码将被完全忽略。