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

jQuery - console.log delivers empty array if evaluated at the end of the code

本文关键字：log jQuery-console 数组代码如果更新时间：2023-09-26

具有以下模式的数组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代码是正确的，因为如果我在function(data)中移动console.log，我会得到预期的输出：

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

就我而言，函数末尾的console.log是在最后求值的，因此我不明白为什么我得到的是空白数组，而在函数中间求值可以提供正确的输出。这种行为有什么暗示吗？

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

您可以看到，jsonSynonyms直到AJAX调用返回后才会被填充。这可能是任何时间，可能是100-200ms。但是，在进行AJAX调用后，console.log(jsonSynonyms)代码会立即执行。因此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!
                    }
                });
            });
        });
    }