javascript - jQuery - 如果在代码末尾求值，console.log 会提供空数组

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 7 年前。

有一个数组 temp1使用这种模式:

[{"group":"Test","keywords":["Hund","Katze"]}]

我能够发出 API 请求来获取 temp1.keywords 的每个元素的同义词具有以下功能:

consultSynonyms(temp1)

    function consultSynonyms(x) {
        // create an empty array where all the responses are gping to be pushed
        // format has to be: [{x: xvalue, y: yvalue, z:zvalue...}]. This array
        // will be passed to data table plugin
        var jsonSynonyms = [];
        $.each(x, function(i, value) {
            // get name of group (f.i. Test)
            var superGroup = value.group;
            $.each(x[i].keywords, function(i, value) {
                // get term (f.i. Hund) and iterate all the terms
                var term = value;
                $.ajax({
                    type: "GET",
                    dataType: "jsonp",
                    url: "https://www.openthesaurus.de/synonyme/search?q=" + term + "&format=application/json&supersynsets=true",
                    success: function(data) {
                        $.each(data.synsets, function(key, value) {
                            // get category (f.i. "Biology") from response
                            var category = this.categories[0];
                            $.each(this.terms, function(key, value) {
                                // synonym is every term delievered by the API Call
                                // level is also delievered (f.i.: "formal", "informal"...)
                                var synonym = this.term;
                                var level = this.level;
                                jsonSynonyms.push({
                                    group: superGroup,
                                    keyword: term,
                                    category: category,
                                    term: synonym,
                                    level: level
                                });
                            });
                        });
                    }
                });
            });
        });
        console.log(jsonSynonyms);
    } 

然而，最后一个console.log没有提供预期的输出，而是一个简单的 [] 。我确信ajax代码是正确的，因为如果我将console.log移到 function(data) 内，我得到了预期的输出:

[{"group":"Unnamed group","keyword":"Hund","category":"Biologie","term":"Hund"},{"group":"Unnamed group","keyword":"Hund","category":"Biologie","term":"Vierbeiner"}...]

据我所知，函数末尾的console.log是在最后评估的，因此我不明白为什么我得到空白数组，而在中间评估它该函数提供正确的输出。对于这种行为有任何提示吗？

Answer 1

您使用 AJAX 请求，该请求开始异步执行其中的代码。一旦你进入异步状态，你就永远不会回去。

你看，jsonSynonyms 直到 AJAX 调用返回之后才会被填充。这可以是任何时间量，可能是 100-200 毫秒。但是，您的 console.log(jsonSynonyms) 代码在 AJAX 调用后立即执行。因此无法填充 jsonSynonyms。

您只能在 AJAX 调用返回后使用填充的 jsonSynonyms 。这意味着您应该在实际的 AJAX 回调中使用它。

function consultSynonyms(x) {
        // create an empty array where all the responses are gping to be pushed
        // format has to be: [{x: xvalue, y: yvalue, z:zvalue...}]. This array
        // will be passed to data table plugin
        var jsonSynonyms = [];
        $.each(x, function(i, value) {
            // get name of group (f.i. Test)
            var superGroup = value.group;
            $.each(x[i].keywords, function(i, value) {
                // get term (f.i. Hund) and iterate all the terms
                var term = value;
                $.ajax({
                    type: "GET",
                    dataType: "jsonp",
                    url: "https://www.openthesaurus.de/synonyme/search?q=" + term + "&format=application/json&supersynsets=true",
                    success: function(data) {
                        $.each(data.synsets, function(key, value) {
                            // get category (f.i. "Biology") from response
                            var category = this.categories[0];
                            $.each(this.terms, function(key, value) {
                                // synonym is every term delievered by the API Call
                                // level is also delievered (f.i.: "formal", "informal"...)
                                var synonym = this.term;
                                var level = this.level;
                                jsonSynonyms.push({
                                    group: superGroup,
                                    keyword: term,
                                    category: category,
                                    term: synonym,
                                    level: level
                                });
                            });
                        });

                        console.log(jsonSynonyms); // look at me now!
                    }
                });
            });
        });

    }