强制动态加载的 JavaScript 脚本按顺序执行

当你在 HTML 文档中动态添加多个<script>标签时，这些脚本是异步加载的。因此，如果第二个脚本依赖于前面的脚本，就可能无法正常工作。我尝试在 `<script>` 标签上使用defer ，但完全没有效果。

我的方法逐个添加<script>标签，并使用load事件将下一个脚本 URL 添加到列表中。我的解决方案还允许您向最后一个脚本节点添加data-{key}={value}属性，以便您可以使用currentScript属性进行设置。

注意：我将脚本标签添加到了<body>标签的末尾。如果您希望将脚本添加到其他位置，可以编辑我的函数的第一行。

用法：

常量 脚本 = [     
    'https://example.org/dependency1.js '     
    'https://example.org/dependency2.js '     
    'https://example.org/generate-table-of-contents.js'     
];     
常量 数据属性 = {     
    标题： 页面内容：     
    按钮文本： “生成目录”     
};     
load_scripts_in_order ( scripts , 数据属性）

按顺序加载脚本：

 /**   
* 创建一个 `<script>` 节点，设置 onload 事件以执行列表中的下一个脚本。   
*   
* @param scripts_array 一个包含一个或多个条目的 JavaScript URL 数组   
* @param final_script_settings key=>value 数组，包含要仅应用于数组中最后一个节点的 `data-{key}={value}` 设置项   
*/     
功能 load_scripts_in_order ( scripts_array , final_script_settings ){     
    常量 身体 = document.querySelector ( ' body' ) ;     
    常量 脚本 = document.createElement ( 'script ' ) ;     
    script.setAttribute ( ' type ' , "text/javascript" );     
    script.setAttribute ( ' src ' , scripts_array [ 0 ]);     
    如果 （ scripts_array .长度 > 1 ）{     
        script.addEventListener ( ' load ' ,     
            load_scripts_in_order.bind ( this , scripts_array.slice ( 1 ) ,     
                final_script_settings     
            ）     
        ）；     
   
    }     
    如果 （ scripts_array .长度 == 1 ）{     
        为了 （常量） 环境 在 final_script_settings ){     
            script.setAttribute ( ' data- ' +设置, final_script_settings [设置]);     
        }     
    }     
   
    body.appendChild ( script ) ;     
}

原文： https://reedybear.bearblog.dev/force-dynamically-loaded-javascript-scripts-to-execute-in-order/