Javascript如何確保顯示JQuery .append

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所說，您應該從響應處理程序中調用printJSON() ，以使其能夠在請求的結果用於填充params使其正常工作。

這是怪物

如果您確實需要等待ajax發布的結果並且不能在響應處理程序中使用該結果（幾乎永遠不會），則可以將async設置為false（請參見http://api.jquery.com/jQuery .ajax / ）， 但是由於JS是在單個線程中執行的，因此這將暫停JS的執行，直到請求完成為止。

由於您使用的是$.getJSON() ，因此需要使用ajaxSetup http://api.jquery.com/jQuery.ajaxSetup/來更改ajax調用的行為。

Answer 3

你必須確保.printJSON()被稱為后.parseJSON()完解析數據。 這可以通過直接調用.printJSON() （請參見jcm的答案）或通過addind支持在完成.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);
    // ...
});