Javascript自定义库问题[重复]答案

【问题标题】：Javascript custom library issue [duplicate]Javascript自定义库问题[重复]
【发布时间】：2018-07-20 22:11:28
【问题描述】：

我看了又看，但我仍在摸不着头脑。如果我遗漏了一些明显的东西，我道歉。我试图创建一个我自己编写的自定义函数库（感谢 stackoverflow 帮助我解决了这个问题......）。然后我有一个在调用网页时加载的 javascript 文件，该文件又调用我的自定义库中的上述函数。

我有一个名为getConfig() 的函数，它的作用显而易见。它获取一个 JSON 文件，其中包含我的服务器的配置详细信息，该服务器托管我的所有 RESTful Web 服务。当我单步执行代码时，配置详细信息按预期返回，但是，当我全速加载网页时，配置对象返回为undefined。我认为这可能是时间问题，所以我将所有内容都包装在 $(document).ready(function()) 块中，但不行。我什至尝试了window.onload = function(){} 块以确保在调用自定义库之前加载所有内容。没有运气！它让我头脑清醒，因为我一生都无法弄清楚发生了什么。

我的自定义库文件看起来像这样，文件名xtendLibs.js

var xtendLibs = {
    getConfig           :   function(){

        var CONFIG;

        $.getJSON("/js/config.json", function(json){
            CONFIG = json;
        });
        return CONFIG;
    },
    getObjects          :   function(config, medicareno, medicarelineno, objectType){

        var object;

        var urlString = config.scheme + config.muleHost + config.mulePort + ":/patients/";

        switch(objectType){
            case ("details") : 
                urlString = urlString + "details/" + medicareno + "/" + medicarelineno ;
                break;
            case ("appointments") :
                urlString = urlString + "appointments/" + medicareno +"/" + medicarelineno;
                break;
        }

        $.ajax({
            type    :   'GET',
            url     :   urlString,
            success :   function(data){
                object = data;
            },
            failure :   function(){
                alert("Failure");
            }
        });
        return object;
    },
    getUrlParameters    :   function(){
        var paramsArray = window.location.search.substring(1).split("&");
        var obj = [];
        var tempArray;
        var paramName,paramValue;

        for(var i = 0; i < paramsArray.length; i++){
            tempArray = paramsArray[i].split("=");
            paramName = tempArray[0];
            paramValue = tempArray[1];
            obj[paramName] = paramValue;
        }

        return obj;
    }

};

上面文件中调用各个函数的javascript文件长这样appts.js

window.onload = function(){

    var config, params, appointments;

    params = xtendLibs.getUrlParameters();   // This line works - and params is returned

    config = xtendLibs.getConfig(); // This line fails but will work if I step through the code

    appointments = xtendLibs.getObjects(    config, 
                                            params["medicareno"],
                                            params["medicarelineno"],
                                            "appointments");

    console.log(params);
}

我真的很难过。任何帮助将不胜感激。

【问题讨论】：

任何 console.log 错误？
在您的 HTML 中，您提到这些 js 文件的顺序是什么？
这似乎是您对异步调用如何工作的理解的问题。问题是您试图在加载之前返回配置。因此，代码在您单步执行时有效，但在您正常运行时无效。例如，看看这个答案stackoverflow.com/a/133327/242311。
感谢大家的回答。这是真的，我正在努力处理 Javascript 的异步组件。它对我来说很陌生。我参加了许多关于 Udemy 的课程，但没有讨论异步组件。这里有几个很好的链接，我会阅读。我很抱歉问这样一个新手问题。干杯！！

标签： javascript jquery postgresql pg-jdbc

【解决方案1】：

Ajax 是异步进程，所以调用 getJson 时不会停止下一条语句的执行。

getConfig : function(){

     var CONFIG;

     $.getJSON("/js/config.json", function(json){
          CONFIG = json;
     });
     return CONFIG;
}

当 getJson 被调用时，它会切换到一个新线程，在这种情况下，下一条语句是“return CONFIG;”被执行。但是，CONFIG 尚未定义，因此返回为 undefined。

你如何解决这个问题？

你无法解决这个问题。不使用此代码设计。您可以不异步 ajax，但它会使您的页面冻结。

您可以在调用“getConfig”时设置一个全局变量“config”，并在执行与它相关的任何函数时检查该配置变量是否已定义，但最好的方法是传递一个函数，其中包含要执行的所有语句在配置完成加载时执行，在 getConfig 函数中，并在“/js/config.json”加载时调用它。

【讨论】：