确保异步脚本顺序加载的解决方案

在异步加载脚本时确保执行顺序是一个常见需求。以下是几种可靠的方法：

方法1：使用回调函数

// 第一个脚本
function loadFirstScript(callback) {
    var script = document.createElement('script');
    script.src = 'first.js';
    script.onload = callback;
    document.head.appendChild(script);
}

// 第二个脚本
loadFirstScript(function() {
    var script = document.createElement('script');
    script.src = 'second.js';
    document.head.appendChild(script);
});

方法2：使用Promise

function loadScript(src) {
    return new Promise(function(resolve, reject) {
        var script = document.createElement('script');
        script.src = src;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

loadScript('first.js')
    .then(function() {
        return loadScript('second.js');
    });

方法3：使用async/await (ES7+)

async function loadScripts() {
    await loadScript('first.js');
    await loadScript('second.js');
}

loadScripts();

方法4：使用模块加载器

// 使用RequireJS
require(['first.js'], function() {
    require(['second.js']);
});

方法5：使用defer属性

<script src="first.js" defer></script>
<script src="second.js" defer></script>

注意：defer会按HTML中的顺序执行，但不如前几种方法灵活。

注意事项

1. 确保处理加载失败的情况
2. 考虑添加超时机制
3. 对于大型项目，考虑使用模块打包工具(如Webpack、Rollup)

以上方法都能确保第二个脚本在第一个脚本加载并执行完成后才加载执行。