加载脚本文件后的多个回调函数

Multiple callback functions after a script file is loaded

本文关键字：回调 函数 脚本 文件 加载      更新时间：2023-09-26

原始HTML页面只是顺序加载每个js文件。在头部，我们加载了一个cart.js文件，在主体中，我们有几个依赖于cart.js的脚本标签。

现在我们需要在$(window).load()中加载cart.js。代码如下:

function loadJsAsync(sourceUrl, id) {
    var js, fjs = document.getElementsByTagName('script')[0];
    if (document.getElementById(id)) { return; }
    js = document.createElement('script'); js.type = 'text/javascript'; js.ansyc = true;
    js.id = id;
    js.src = sourceUrl;
    fjs.parentNode.insertBefore(js, fjs);
}
$(window).load(function () {
  loadJsAsync("<%=ScriptSourceUrl %>", 'cartjs');
});

在我添加了上面的代码之后，cart.js在整个页面加载之后被加载。但是，这些函数在正文脚本中依赖它生成错误。

在正文脚本中，我使用

$('#cartjs').on('load', function(){})

来包装那些依赖的函数，但是它不起作用，因为#cartjs是动态添加的。然后我试着输入

$('body').load('#cartjs', function(){})

来包装那些相关的函数，它会导致永不停止的无限循环。此外，它只检测#cart元素的加载，而不检测实际cart.js文件的加载。

我也看到有人提到$. getscript()，但我不能为每个依赖函数调用它，因为它会多次加载cart.js，我希望只是加载cart.js一次，并执行依赖于它的多个函数。

我目前的解决方案是创建一个名为回调的数组，并将这些依赖函数添加到该数组中。然后添加

$('#cartjs').load(function(){})

在loadJsAsync()中，以及在load()的回调中迭代回调以执行所有依赖函数。这看起来不像是一个体面的解决方案。

我想知道是否有任何解决方案可以检测cart.js文件的加载，然后添加那些依赖函数作为其回调，以便它们可以在cart.js加载后执行。

提前感谢。

我会建议你使用RequireJS，它完全符合你的需要，我相信，看看[这里](http://requirejs.org/docs/start.html)的简单介绍。

简单的代码片段是这样的: 
requirejs(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

所有的函数都将在所需的js加载后触发

相关文章：