异步加载js但同步执行 [英] Load js Asynchronously But Execute Synchronously

问题描述

场景是我有很多 js 文件.根据不同的平台调用不同的文件.所以我有一个问题，因为我想异步加载文件.但是这些文件的执行应该同步完成.目前我正在做这个函数调用

The Scenario is that I have lots of js files. Different files are called depending on different platforms. So I have a question as I want to load files Asynchronously. But the Execution of these files should be done synchronously. Currently I am doing this function call

  function loadScriptJs(src) {   
     Console.log(' Call to file '+src);
     var file = document.createElement('script'),
            head = document.getElementsByTagName('head')[0];
    file.type = 'text/javascript';
    file.setAttribute("defer","defer");
    file.setAttribute("src",src);
    head.appendChild(file);
        file.onload = function() {            
              console.log(src + " is loaded.");
        };
  }

现在我有一个数组，其中包含正在调用的 js 文件列表.我遍历数组并为每个 src 调用此函数.我在每个 js 文件中都使用了 document.ready 函数.在这里我检查了文件的依赖关系并优化了序列.即依赖文件稍后加载(在数组中较晚)，并且更多的 Parent 类文件更早出现.

Now I have a array which has a list of js files being called. I loop through the array and call this function for each src. I have used document.ready function with in each of the js file. Here I have checked the dependencies of the files and made the sequence optimized. ie The dependent files are loaded later (come later in the array) and the more Parent like files come earlier.

例如:- 如果我有文件 A1、B2、C3、D4、E5 ..... 就像明智的那样.我的数组是 ['js/A1.js','js/B2.js','js/C3.js'...].当我通过循环运行它时.我得到调用文件 [文件名]"的控制台与数组中的顺序相同，但[文件名] 已加载"的控制台未按预期顺序出现.

Example:- If I have files A1,B2,C3,D4,E5 ..... like wise. My array is ['js/A1.js','js/B2.js','js/C3.js'...]. When I run this through the loop. I get the consoles of 'Call to file [filename]' is the same sequence as in the array but consoles of '[filename] is loaded' are not coming in the intended sequence.

是的，我无法通过互联网控制加载.但我希望执行是同步的.即当最后一个文件完成加载时开始所有文件执行.

Yes I cannot control the loading as its over the internet. But I want to the execution to be synchronous. ie Begin all file execution when the last file completes loading.

任何人都可以为我提供任何建议、建议或想法.

Can anyone provide me any advice, suggestion or idea for it.

推荐答案

动态插入的脚本可能不符合 defer 属性.script 标签有一个 async 属性.默认情况下它是真的.将其显式设置为 false.

Dynamically inserted scripts may not adhere to the defer attribute. script tags have an async attribute. By default it's true. Explicitly set it to false.

file.setAttribute("async", "false");

或纯 HTML

<script type="text/javascript" async=false src="A1.js"></script>

您可能还需要删除每个脚本中的 document.ready 方法并在顶层启动脚本的逻辑，将每个 JS 脚本附加到 body 标签而不是标题.如果多个脚本在 ready 事件触发之前注册了它，您将不知道它们的调用顺序.

You might also need to remove the document.ready method in each script and start the script's logic at the top level, appending each JS script to the bottom of the body tag instead of the header. If multiple scripts register for the ready event before it's fired you do not know what order they will be called in.

这篇关于异步加载js但同步执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！