Question

我有一个函数加载JS文件，JS之一文件对于其他代码运行成功很重要，所以我试着等到函数成功加载它。

直到现在我已经尝试了几种方法 - 但它们并不适用于我，例如这个：

$(document).ready(function () {
    function kickOff() {
        return new Promise(function (resolve, reject) {  
            loadRemoteFile("hconfig.js");       
        });
    }
    kickoff().then(function (result) {
        run the code that depends on the code that kickoff() run
    });
});

LoadRemoteFile函数

function loadRemoteFile(filename, loadIntoHeader){ 
        filetype = filename.match(".css") ? "css" : "js";

        if (filetype=="js"){ //if filename is a external JavaScript file
            if(!loadIntoHeader){
                var script   = document.createElement("script");
                script.type  = "text/javascript";
                script.src   = filename;
                document.body.appendChild(script);          
            }else{
                var fileref=document.createElement('script');
                fileref.setAttribute("type","text/javascript");
                fileref.setAttribute("src", filename);
                document.getElementsByTagName("head")[0].appendChild(fileref);              
            } 
        }else if (filetype=="css"){ 
            if(!loadIntoHeader){
                var style   = document.createElement("link");
                style.type  = "text/css";
                style.rel   = "stylesheet";
                style.href   = filename;    
                document.body.appendChild(style);
            }else{          
                var fileref=document.createElement("link");
                fileref.setAttribute("rel", "stylesheet");
                fileref.setAttribute("type", "text/css");
                fileref.setAttribute("href", filename);
                document.getElementsByTagName("head")[0].appendChild(fileref);
            } 
        }
}

这是一个很好的解决方案吗？为什么它不起作用？

Answer 1

您需要在您创建的resolve()上致电Promise()。只有在那之后才会执行then()中的逻辑。

为了做到这一点，我建议你重构你的逻辑，以便loadRemoteFile()本身返回承诺，这样就可以解决它的范围，而不需要将其作为参数传递。试试这个：

＆＃13;

$(document).ready(function() {
  function kickOff() {
    return loadRemoteFile("hconfig.js");
  }

  function loadRemoteFile(filename) {
    return new Promise(function(resolve, reject) {
      console.log('loading remote file...');
      
      // your logic here...

      setTimeout(function() { // pretend this is an AJAX request....
        console.log('remote file loaded.');
        resolve(); // resolve the promise here to signify all work has been completed
      }, 2000);
    });
  }

  kickOff().then(function(result) {
    console.log('kickoff...');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

请注意，如果在远程调用期间遇到错误，您也可以在Promise处理程序中调用reject()。

或者，您可以更改逻辑以使用回调模式。这消除了对Promise和您的中间kickOff()方法的需求：

＆＃13;

$(document).ready(function() {
  function loadRemoteFile(filename, cb) {
    console.log('loading remote file...');

    // your logic here...

    setTimeout(function() { // pretend this is an AJAX request....
      console.log('remote file loaded.');
      cb && cb();
    }, 2000);
  }

  loadRemoteFile("hconfig.js", function(result) {
    console.log('kickoff...');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

在运行其他代码之前等待函数执行

1 个答案: