javascript - 有序 JavaScript 文件加载

Question

我需要在页面加载后以非常特定的顺序动态加载多个 JavaScript 文件资源。我正在尝试使用 onload，但这似乎在 Assets 完全加载之前触发。我应该如何调整下面的脚本来触发正确的回调来加载下一个脚本？

注意:只需在最新的 Chrome、Firefox、Safari 和 IE9 中工作。

function loadAssets() {
    // Setup script
    var scriptJS = document.createElement('script');
    scriptJS.type = 'text/javascript';
    scriptJS.src = objectUrl;

    scriptJS.onload = loadAssetsNext();

    // Begin insertion
    var headerJS = document.getElementsByTagName('HEAD');
    headerJS[0].appendChild(scriptJS);
},
function loadAssetsNext() {
    // Increment object counter
    objectsCount++;
    
    // Test to see if you should call another item
    if ((objectsCount) < objects.length) {
        // Setup script
        var scriptJS = document.createElement('script');
        scriptJS.type = 'text/javascript';
        scriptJS.src = nextObjectUrl;
        
        // Declare callback to fire after script has fully loaded
        scriptJS.onload = loadAssetsNext();
    
        // Begin insertion
        var headerJS = document.getElementsByTagName('HEAD');
        headerJS[0].appendChild(scriptJS);
    }
}

我需要的是类似scriptJS.completeLoaded = doStuff的东西。但不知道从这里该去哪里。

PS:jQuery 不是一个选项或另一个库。您应该能够通过稍微修改上面的脚本来做到这一点。

Answer 1

您的 onload 事件立即触发的原因是您正在调用它，而不是分配它。

scriptJS.onload = loadAssetsNext();

这只是将调用 loadAssetsNext 的返回值分配给 scriptJS 对象的属性 onload。您打算做的是:

scriptJS.onload = loadAssetsNext;

这将onload处理程序设置为loadAssests函数。这应该可以解决您的问题。