加载文件，然后调用回叫功能 [英] Load files and then call a call back function

问题描述

在我的项目中，默认情况下，我正在index.html文件中加载一些js和css文件.但是我需要稍后使用javascript(动态地 )加载其他js/css文件，然后在成功加载这些动态文件之后，我需要调用回调函数.

In my project, I am loading some js and css files by default in index.html file. But I need to load some other js/css files using javascript later (dynamically) and then after those dynamic files are loaded successfully, I need to call a callback function.

我检查了 jQuery.getScript() ，该函数在加载每个文件后调用回调函数，但是并非所有文件都已加载.

I checked jQuery.getScript(), which is calling callback function after each file is loaded but not all files are loaded.

我尝试过:

function loadFiles(payload, callbackFunc) {
    var head = document.head || document.getElementsByTagName("head")[0];
    var fileref = null;
    if (payload.js) {
        var js = payload.js;
        for (var i = 0; i < js.length; i++) {
            var file = this.getPath("files", js[i]);
            if (!file.loaded) {
                var fileref = document.createElement('script');
                fileref.setAttribute("type", "text/javascript");
                fileref.setAttribute("src", file.path);
                fileref.onreadystatechange = callbackFunc;
                fileref.onload = callbackFunc;
                head.appendChild(fileref);
                file.loaded = true;
            }
        }
    }
    if (payload.css) {
        var css = payload.css;
        for (var i = 0; i < css.length; i++) {
            var file = this.getPath("files", css[i]);
            if (!file.loaded) {
                var fileref = document.createElement('link');
                fileref.setAttribute("rel", "stylesheet");
                fileref.setAttribute("type", "text/css");
                fileref.setAttribute("href", file.path);
                fileref.onreadystatechange = callbackFunc;
                fileref.onload = callbackFunc;
                head.appendChild(fileref);
                file.loaded = true;
            }
        }
    }
}

请有人帮我解决这个问题.

Please someone help me on how to solve this issue.

以某种方式，以下答案对我不起作用.我无法在chrome开发人员工具中看到动态添加的脚本.因此，我最终通过引用@ jfriend00的答案来修改我的上述代码:

Somehow the below answers didn't work for me. I wasn't able to see the dynamically added scripts in developer tool of chrome. So, I ended up modifying my above code by referring @jfriend00's answer:

function loadFiles(list, fn){
    var counter = 0;
    var head = document.head || document.getElementsByTagName("head")[0];
    for (var i = 0; i < list.length; i++) {
        var fileref = document.createElement('script');
        fileref.setAttribute("type", "text/javascript");
        fileref.setAttribute("src", list[i]);
        fileref.onload = function(){
            counter++;
            if(counter === list.length){
                fn();
            }
        }
        head.appendChild(fileref);
    }
    if(list.length === 0){
        fn();
    }
}

推荐答案

以下是使用$.getScript()通过计数器加载多个文件的方法:

Here's a way to use $.getScript() to load multiple files using a counter:

function getScripts(list, fn) {
    var cntr = list.length;
    for (var i = 0; i < list.length; i++) {
        $.getScript(list[i], function() {
            --cntr;
            if (cntr === 0) {
                fn();
            }
        });
    }
}

getScripts(["file1.js", "file2.js"], function() {
    // all scripts loaded here
});

这是一种使用诺言的方法:

Here's a way using promises:

function getScripts(list) {
    var promises = [];
    for (var i = 0; i < list.length; i++) {
        promises.push($.getScript(list[i]));
    }
    return $.when.apply($, promises);
}


getScripts(["file1.js", "file2.js"]).then(function() {
    // all scripts loaded here
});

您可以对CSS文件使用这些相同的概念.

You can use these same concepts for your CSS files.

这篇关于加载文件，然后调用回叫功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！