Question

我有5个不同的js文件，我想在ajax调用成功响应状态后执行。

我目前正在做的是：

function require(list, fn)
{
    for (var i = 0; i < list.length; i++) {
        var headID = document.getElementsByTagName("head")[0];
        var newScript = document.createElement('script');
        newScript.type = 'text/javascript';
        newScript.src = list[i];
        if (newScript.readyState){  //IE
        newScript.onreadystatechange = function(){
            if (newScript.readyState == "loaded" ||
                newScript.readyState == "complete"){
                newScript.onreadystatechange = null;
                callback();
            }
          };
        } else {  //Others
          newScript.onload = function(){
            callback();
        };
      }

      newScript.src = url;
      headID.appendChild(newScript);
    }
}

假设我有file1.js，file2.js，file3.js。我在file2.js上声明了一个变量dca，我希望将其用于file3.js中的一些操作。为此，我需要按顺序加载file1.js，file2.js。但不幸的是，这种情况并没有发生在我正在使用的方法中。

请帮助如何实现这一目标。

我甚至试过

addEventListeners('load',function({ //some operations }));

但没有效果。

Answer 1

这应该有效：

const require = ([head, ...tail]) => {
  const loadScript = link => new Promise((fulfill, reject) => {
    const script = document.createElement('script');
    script.addEventListener('load', fulfill);
    script.addEventListener('error', reject);
    script.src = link;
    document.head.appendChild(script);
  });
  loadScript(head).then(() => {
    if (tail.length > 0) {
      require(tail);
    }
  });
};

我希望代码能够自我解释。

另请确保dca变量为global。

动态地按顺序加载javascript

1 个答案: