Question

我有以下javascript函数，它使用JQuery中的.append。但是，只有在函数开头添加alert()时，它才有效。我发现这种行为的原因是由于AJAX的异步方式。

如何确保此功能显示所需的html？

this.printJSON = function(id) {
    //alert(id);
    $(id).append('<button id="#store">store</button>');
    for(key in params) {
          $(id).append('<p '...'</p>');
    }
};

我的全班，这是这样称呼的：

params.parseJSON();
params.printJSON("#showdata");

function Parameters(parametersFile) {
    //private stuff
    var paramFile = parametersFile;
    var params = {};

    //public stuff
    this.parseJSON = function() {
        $.getJSON('inputFileParametersJSON.txt', function(json) {

        for(var param in json) {
            for(var key in json[param]) {
                if(json[param].hasOwnProperty(key)) {
                    params[key] = {
                    filterIdentifier : json[param][key].filterIdentifier,
                    paramIdentifier : json[param][key].paramIdentifier,
                    param : json[param][key].param
                        };
                    }
                 }

          }
       });
    };

    this.printJSON = function(id) {
            alert("");
        $(id).append('<button id="#store">store</button>');
        for(key in params) {
                $(id).append('<p id="' + key + '"> filterIdentifier: ' + params[key].filterIdentifier + '<br /> paramIdentifier: ' + params[key].paramIdentifier + '<br /> param= <input type="text" id="' + key + '"name="param" value="' + params[key].param + '"/></p>');

                        //alert(params[key].filterIdentifier);
        }
    };

}

Answer 1

看起来您可能需要重新评估调用函数的方式。你真的需要单独打电话给他们吗？我将parseJSON重命名为getJSON

function Parameters(parametersFile) {
    // ...

    var printJSON = function(id) {
        $(id).append('<button id="#store">store</button>');
        for(key in params) {
            // ...
        }
    };

    //public stuff
    this.getJSON = function(id) {
        $.getJSON('inputFileParametersJSON.txt', function(json) {

        // process results ...

          printJSON(id);
       });
    };

}

这样您就可以简单地调用foo.getJSON('#someid')，并且在处理完请求之前不会追加。

Answer 2

正如jcm所说，您应该从响应处理程序调用{{1}}，以便在请求结果用于填充printJSON()后启用它。

这里是怪物

如果你真的需要等待ajax帖子的结果并且不能在响应处理程序中使用结果（几乎从不），你可以将params设置为false（参见http://api.jquery.com/jQuery.ajax/ }），但，因为JS在单个线程中执行，这将停止执行JS直到请求完成。

由于您使用的是async，因此您需要使用$.getJSON() http://api.jquery.com/jQuery.ajaxSetup/来更改ajax调用的行为。

Answer 3

您必须确保在.printJSON()完成解析数据后调用.parseJSON()。这可以通过直接调用.printJSON()（请参阅 jcm 的回答）或添加对.parseJSON完成时将执行的回调支持来完成。

function Parameters(parametersFile) {
    var that = this;
    // ...
    this.parseJSON = function(callback) {
        $.getJSON('inputFileParametersJSON.txt', function(json) {
            for (var param in json) {
                for (var key in json[param]) {
                    // ...
                }
            }
            callback.call(that);
        });
    };

    this.printJSON = function(id) {
        // ...
    }
};

// ...
parameters.parseJSON(function() {
    // ...
    // you can use "this" as if you were in Parameters
    this.printJSON(someId);
    // ...
});

Javascript如何确保显示JQuery .append

3 个答案: