jQuery的jQuery的依赖脚本之前加载，但后者仍然说“$没有定义”

Question

在我的HTML页面，我的加载JS文件方式如下：

<script id="jjquery"></script>
<script id="jscookie"></script>
<script id="winx"></script>

<script>
(function(){
  if(screen.width > 479) 
    document.querySelector("#jjquery").setAttribute("src", "/js/jquery-3.3.1.min.js");
    document.querySelector("#jscookie").setAttribute("src", "/js/jscookie.js");
    document.querySelector("#winx").setAttribute("src", "/js/winx.js");
}());
</script>

基本上我使用的方式描述in this answer只加载从特定的屏幕分辨率开始某些脚本。但第三个剧本了三个，即依赖于jQuery的，不工作，说$ is not defined。尽管如果我在控制台输入$，则返回正常的响应。当我看到在HTML输出脚本的顺序，很显然，jQuery是加载其他前两个脚本。可能是什么这里的问题？

附：如果我只是加载脚本通常不分辨率检查一切正常comlpetely罚款。

Answer 1

问题是，该脚本异步加载，所以你的代码的顺序是不相关的。

你可以看到你如何正确导入你的脚本MDN example。

在你的情况，如果你的一些脚本依赖于jQuery的，你可以创建一个onLoadJquery功能，并追加其作为脚本的onload属性，此功能将在导入后执行。

<script>
(function(){
  if(screen.width > 479) { 
    // add the callback that will be executed once jquery is loaded
    document.querySelector("#jjquery").addEventListener("load", onLoadJquery);
    document.querySelector("#jjquery").setAttribute("src", "/js/jquery-3.3.1.min.js");
    document.querySelector("#jscookie").setAttribute("src", "/js/jscookie.js");

  }

  function onLoadJquery() {
    // safely import the rest of the scripts
    document.querySelector("#winx").setAttribute("src", "/js/winx.js");
  }
}());
</script>