弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 2135|回复: 4

如何使用jQuery $ .getScript()方法包含多个js文件

[复制链接]
发表于 2020-9-29 16:16:36 | 显示全部楼层 |阅读模式
您可以使用promises getScript()并等待所有脚本都加载,例如:

$.when(
    $.getScript( "/mypath/myscript1.js" ),
    $.getScript( "/mypath/myscript2.js" ),
    $.getScript( "/mypath/myscript3.js" ),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })).done(function(){

    //place your code here, the scripts are all loaded});
小提琴

ANOTHER FIDDLE

在上面的代码中,添加一个Deferred并将其解析为内部$()就像在jQuery调用中放置任何其他函数一样$(func),就像它一样

$(function() { func(); });
即它等待DOM准备就绪,因此在上面的例子中$.when等待加载所有脚本并且由于$.Deferred在DOM就绪回调中解析的调用而使DOM准备就绪。

对于更通用的用途,一个方便的功能
可以像这样创建一个接受任何脚本数组的实用程序函数:

$.getMultiScripts = function(arr, path) {
    var _arr = $.map(arr, function(scr) {
        return $.getScript( (path||"") + scr );
    });

    _arr.push($.Deferred(function( deferred ){
        $( deferred.resolve );
    }));

    return $.when.apply($, _arr);}
可以像这样使用

var script_arr = [
    'myscript1.js',
    'myscript2.js',
    'myscript3.js'];
$.getMultiScripts(script_arr, '/mypath/').done(function() {
    // all scripts loaded});
路径将被添加到所有脚本的位置,并且也是可选的,这意味着如果数组包含完整的URL,那么也可以执行此操作,并将所有路径全部放在一起

$.getMultiScripts(script_arr).done(function() { ...
争论,错误等
另外,请注意done回调将包含许多与传入脚本匹配的参数,每个参数表示包含响应的数组

$.getMultiScripts(script_arr).done(function(response1, response2, response3) { ...
每个数组都包含类似的内容[content_of_file_loaded, status, xhr_object]。我们通常不需要访问这些参数,因为无论如何都会自动加载脚本,并且大部分时间done回调都是我们真正知道所有脚本都已加载的,我只是为了完整而添加它,以及在需要访问加载文件的实际文本或需要访问每个XHR对象或类似内容的极少数情况下。

此外,如果任何脚本无法加载,将调用失败处理程序,并且不会加载后续脚本

$.getMultiScripts(script_arr).done(function() {

     // all done

}).fail(function(error) {

     // one or more scripts failed to load

}).always(function() {

     // always called, both on success and error

});
来源:https://www.imooc.com/wenda/detail/585143


回复

使用道具 举报

 楼主| 发表于 2020-9-29 16:16:48 | 显示全部楼层
您可以尝试使用递归。这将一个接一个地同步下载它们,直到它完成下载整个列表。

  1. var queue = ['url/links/go/here'];ProcessScripts(function() { // All done do what ever you want}, 0);function ProcessScripts(cb, index) {
  2.     getScript(queue[index], function() {
  3.         index++;
  4.         if (index === queue.length) { // Reached the end
  5.             cb();
  6.         } else {
  7.             return ProcessScripts(cb, index);
  8.         }
  9.     });}function getScript(script, callback) {
  10.     $.getScript(script, function() {
  11.         callback();
  12.     });}
复制代码

回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-9-29 16:17:03 | 显示全部楼层
以下是使用Maciej Sawicki的答案并实现Promise回调:

function loadScripts(urls, path) {
    return new Promise(function(resolve) {
        urls.forEach(function(src, i) {

            let script = document.createElement('script');        
            script.type = 'text/javascript';
            script.src = (path || "") + src;
            script.async = false;

            // If last script, bind the callback event to resolve
            if(i == urls.length-1) {                    
                // Multiple binding for browser compatibility
                script.onreadystatechange = resolve;
                script.onload = resolve;
            }

            // Fire the loading
            document.body.appendChild(script);
        });
    });}
使用:

let JSDependencies = ["jquery.js",
                      "LibraryNeedingJquery.js",
                      "ParametersNeedingLibrary.js"];loadScripts(JSDependencies,'JavaScript/').then(taskNeedingParameters);
所有Javascript文件都会尽快下载并按给定顺序执行。然后taskNeedingParameters被叫。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-6 09:36:29 | 显示全部楼层
阮一峰的网络日志:jQuery的deferred对象详解
http://www.ruanyifeng.com/blog/2 ... eferred_object.html
回复 支持 反对

使用道具 举报

 楼主| 发表于 2022-8-12 21:21:45 | 显示全部楼层

$.ajax同步加载JS避免重复加载。

$.ajax({
        async: false,
        url: "js/lang/cn.min.js",
        dataType: "script"
});
真实案例:Hondy.Cloud.Console.js/function.js
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-11-24 02:25 , Processed in 0.048176 second(s), 15 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表