等待 Javascript 加载 Promise

Question

I am building a solution in which multiple Javascript libraries are dynamically loaded onto the screen at different points in time based on the user's interaction. After the libraries are loaded, the scripts in the library are executed.

For example:

    let script1 = '<script class="'+script_class+'" id="' + script_id + '" type="text/javascript" src="' + some_script_url +'"></script>';
    
     $("head").append(script1);

let script2 = '<script class="'+script_class+'" id="' + script_id + '" type="text/javascript" src="' + some_script_url +'"></script>';
    
     $("head").append(script2);

let script3 = '<script class="'+script_class+'" id="' + script_id + '" type="text/javascript" src="' + some_script_url +'"></script>';
    
     $("head").append(script3);

And then a function will execute a function inside the script:

function doSomething() {
      scriptFunction();
}

doSomething();

The problem is sometimes the script will not fully be loaded before the function tries execute. This causes error likes "scriptFunction not found". How can I wait for each libraries to load before executing the scripting? Can this be done with promises?

Answer 1

Here is a function that returns a promise that resolves when a script has loaded:

 function loadScript(src) { return new Promise(resolve => { const script = document.createElement("script"); script.setAttribute("async", ""); script.onload = resolve; script.setAttribute("src", src); document.head.appendChild(script); }); } const urls = [ "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js", "https://cdnjs.cloudflare.com/ajax/libs/luxon/3.0.1/luxon.min.js" ]; Promise.all(urls.map(loadScript)).then(ready); function ready() { console.log("all loaded"); console.log($.fn.jquery); console.log(luxon.DateTime.now().toString()); }