Question

我有一些javascript代码，其中加载了多个javascript文件和库。

chartjs
chartjs-plugin-datalabels
chartjs-plugin-datatables

在大多数情况下，加载这些文件没有问题。

但是有时我会收到“未捕获的TypeError：无法读取未定义的属性'helpers'”

我认为有时Chart.js并未完全加载。那么，如何确定Chart.js已加载，然后加载我的依赖脚本？

chartjs-plugin-datalabels引发错误：

chartjs-plugin-datalabels.js?_=1570176417056:15 Uncaught TypeError: Cannot read property 'helpers' of undefined
    at chartjs-plugin-datalabels.js?_=1570176417056:15
    at chartjs-plugin-datalabels.js?_=1570176417056:10
    at chartjs-plugin-datalabels.js?_=1570176417056:11

这是我加载所有JavaScript文件的方式：

Promise.all([loadChartJS(), loadOtherScripts(), loadCss()])
    .then(() => {
        //do something with loaded files.
    });




function loadChartJS() {
    return new Promise((resolve, reject) => {
        dependentScripts = [
            libs/chartjs.min.js,
            libs/someLib.js,
            libs/anotherLib.js,
        ];
        for (var i in dependentScripts) {
            $.getScript(dependentScripts[i]).done(function(script, textStatus) {
                resolve();
            })
        }

    });
}

function loadScripts() {
    return new Promise((resolve, reject) => {
        listOfScripts = [
            libs/datatables.min.js,
            libs/chartjs-plugin-datalabels.js,
             ... some other files
        ];

        var stage = 0;
        for (let e in listOfScripts) {
            $.getScript(listOfScripts[e])
                .done(function(script, textStatus) {
                    stage++;
                    if (stage == listOfScripts.length) {
                        resolve();
                    }
                })
                .fail(function(jqxhr, settings, exception) {
                    reject(jqxhr);
                });
        }
    });
}

Answer 1

在这两种情况下，似乎都在dependentScripts和listOfScripts中的第一个元素被加载时解决单个Promise，而不是在所有元素都被加载时才解决。也就是说，在解决承诺之前，您不必等待所有dependentScripts和listOfScripts。

Answer 2

我认为我已经找到了一种加载依赖脚本的解决方案。因此，只有在chartjs解决后才能加载DataLabels插件。

$.when(
    $.getScript(`libs/chartjs.min.js`),
    $.Deferred(function(deferred) {
        $(deferred.resolve);
    })
).done(function() {
    $.getScript(`libs/chartjs-plugin-datalabels.js`)
    //Load other scripts
    Promise.all([loadScripts(), loadCss()])
        .then(() => {

            //do stuff ...

        });
});

收到“未捕获的TypeError：无法读取未定义的属性”帮助器”

2 个答案: