在 jQuery 中，如何处理并行脚本加载？

Question

我在应用程序开发中遇到了这个问题，不知道该尝试什么。我有以下功能：

// Function to load Scripts on the fly
$.loadScript = function(url, arg1, arg2) {
    var cache = false,
        callback = null;
    //arg1 and arg2 can be interchangable
    if ($.isFunction(arg1)) {
        callback = arg1;
        cache = arg2 || cache;
    } else {
        cache = arg1 || cache;
        callback = arg2 || callback;
    }
    
    var that = this;
    var load = true;

    var deferred = jQuery.Deferred();
    if (jQuery.isFunction(callback)) {
        deferred.done(function(){
            callback.call(that);
        });
    };

    if( url.constructor === Array ){
        function loadScript(i) {
            if (i < url.length) {
                var el = url[i];

                //check all existing script tags in the page for the url
                if (window.loadedScripts.indexOf(el) === -1) {
                    window.loadedScripts.push(el);
                    //didn't find it in the page, so load it
                    $.ajax({
                        url: el,
                        success: function(e){
                            __info('Loaded script. url: '+el, 'verbose');
                            loadScript(i + 1);
                        },
                        complete: function(e){
                            if(typeof e.done !== 'function'){
                                $(function () {
                                    $('<script>')
                                        .attr('type', 'text/javascript')
                                        .text(e.responseText)
                                        .prop('defer',true)
                                        .appendTo('head');
                                })
                            }
                        },
                        dataType: 'script',
                        cache: cache
                    });
                }
                //-----------------
            } else {
                deferred.resolve();
            }
        }
        loadScript(0);

        return deferred;
    } else {
        //check all existing script tags in the page for the url
        if (window.loadedScripts.indexOf(url) === -1) {
            window.loadedScripts.push(url);
            //didn't find it in the page, so load it
            $.ajax({
                url: url,
                success: function(e){
                    __info('Loaded script. url: '+url, 'verbose');
                    deferred.resolve();
                },
                complete: function(e){
                    if(typeof e.done !== 'function'){
                        $(function () {
                            $('<script>')
                                .attr('type', 'text/javascript')
                                .text(e.responseText)
                                .prop('defer',true)
                                .appendTo('head');
                        })
                    }
                },
                dataType: 'script',
                cache: cache
            });
        } else {
            deferred.resolve();
        };
    }
};

这个函数的作用类似于$.getScript，但加载了几个脚本（或只加载一个），最后触发一个回调并引入缓存参数来处理这个应用程序的自定义缓存。

它已经可以正常工作了，除非在多个脚本请求并行加载的情况下。当这种情况发生时，第二组脚本进入函数，观察第一个脚本（块通用）正在加载并且不加载它（但需要等待它）。但是，在这种情况下，在第一个块中，第一个脚本尚未加载，而在第二个块中，此脚本是必需的，但被跳过了。

使用示例：

<script type="text/javascript">
    $.loadScript([
        "//code.highcharts.com/highcharts.src.js",
        "//code.highcharts.com/modules/data.js",
        "//code.highcharts.com/modules/treemap.js"
    ], true, function(){ 
        $.ajax({
             type: 'POST',
             url: '/skip-process/charts/graph1',
             success: function(data){
                 console.log($.parseJSON(data));
                 var chart = new Highcharts.Chart($.parseJSON(data));
             }
        });
    });
</script>

如何处理多个脚本请求同时加载同一个脚本而他们没有等待呢？非常感谢。

Answer 1

我会使用$.getScript 并使用它返回的承诺并使用then() 来解决这个问题，而不是将回调传递给函数。

以下没有经过很好的测试，但应该非常接近

$.loadScript = function (url) {
  // create loadedScripts array if doesn't already exist
  const cache = window.loadedScripts = window.loadedScripts || [];
  // always use array even when string passed in, reduces duplicate code
  const normalizeUrl = (url) => (Array.isArray(url) ? url : [url]);

  let urlArr = normalizeUrl(url).filter((u) => {
    if (cache.includes(u)) {
      return false;
    }
    cache.push(u);
    return true;
  });

  // if all cached just return a resolved promise
  if (!urlArr.length) {
    return Promise.resolve();
  }
  
  // create initial getScript promise
  const reqs = $.getScript(urlArr.shift());

  while (urlArr.length) {
    const u = urlArr.shift();
    // chain a new then() for each url
    reqs.then(() => $.getScript(u));
  }
  //return getScript promise chain
  return reqs;
};

$.loadScript([
    'remote-script-1.js', 
    'remote-script-2.js'])
 .then(() => {
  console.log('All Loaded');    
});