等待动态加载的 Javascript 文件完成加载的有效方法是什么?

What is an efficient way of waiting for a dynamically loaded Javascript file to finish loading?

本文关键字：加载 有效 方法 是什么 文件 动态 Javascript 等待      更新时间：2023-09-26

我正在加载一个Javascript文件，其中包含一个我想调用的函数。这是不可能的，因为在"启动"加载和实际调用函数之间，JS尚未加载。当然，我可以做一些类似setTimeout('functionCall();',5000);的事情，但我不认为这是一种非常有效的方法，而且对我来说似乎真的很不稳定。这就是为什么我想知道是否有更好的方法可以做到这一点。

这是我正在使用的代码。有问题的函数称为 controllerStart 。如果我在这里注释掉最后一行，并将其输入到Javascript终端中（就像在Chrome开发人员工具上一样），一切正常。

    function loadController(name){
        clearAll();
        scriptContainer.innerHTML = '';
        var scriptElement = document.createElement('script');
        scriptElement.setAttribute('src','controllers/' + name + '.js');
        scriptElement.setAttribute('type','text/javascript');
        scriptContainer.appendChild(scriptElement);
        controllerStart();// <-- Doesn't work from here, but works on a terminal
    }

感谢您的观看！

引用

Javascript后调用该函数。

JS加载是同步的。

所以。。。。。

---- js 库调用-----

-----在此处调用函数-----

利润！

编辑：具体来说： 

function loadController(name){
        clearAll();
        scriptContainer.innerHTML = '';
        var scriptElement = document.createElement('script');
        scriptElement.setAttribute('src','controllers/' + name + '.js');
        scriptElement.setAttribute('type','text/javascript');
        scriptContainer.appendChild(scriptElement);
        scriptElement.onload = new function(){controllerStart();}; 
       //something like that.
    }

编辑2：我的错 - 使用"加载"而不是"加载" - 大脑上的jQuery太多

有关"加载"的更多信息，请点击此处：http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html

Nicholas C. Zackas 有一篇关于它的好文章，你可以在这里阅读，它只包括你要使用的代码。

基本上，它只是一个函数，既包含要加载的JS文件的URL，也包含加载时要执行的回调。然后，它创建 <script> 标记，附加回调以在加载后执行（通过 onreadystatechange 或 onload 事件），并将其插入到 DOM 中。

然后，您需要做的就是这样称呼它：

loadScript('controllers/' + name + '.js', controllerStart);

从它的声音来看，你正在异步加载你的JavaScript。在较新的浏览器中，代码上有一个 onload 事件，该事件在完成加载时触发。但是，如果您需要跨浏览器支持，唯一的方法是：

（a）如果它从与页面相同的服务器加载，请使用AJAX加载javascript，然后在加载时使用eval（）执行它（而不是使用<script>标签），

（b） 如果您控制文件，请在其末尾添加一个事件触发器，然后在主 JavaScript 文件中侦听该触发器。JQuery 的 bind（） 和 trigger（） 函数对此非常方便。

（c） 如果它是从其他地方加载的，而你不控制它（但确实有权重新分发它），请将其重新定位到你的服务器并遵循 （a）。

您也可以取消异步加载，只需在标头中放置一串<script>标签，这是老式的方式。这保证了在上一个脚本完成之前不会运行每个脚本。

相关文章：