Невозможно получить длину слова после динамического добавления элемента в jQuery

Question

Во-первых, я использую ajax для принятия JSON данных путем добавления к переменной dict, которую я объявил ранее ajax.

Я хочу получить длину слова, но здесь вывод:

вывод

и сообщение рядом с выводом dict показывает «Значение ниже было оценено только сейчас»:

сообщение

Вот мой код:

<script>
    $(function () {
        var table_id = $('#table_id').text();
        var list_length = $.words_list(table_id);
    });

    //function
    jQuery.extend({
        'words_list': function (id) {
            var send_list = {};
            $.ajax({
                type: 'GET',
                url: '/get_wordslist/' + id,
                success: function (returnData) {
                    $.each(returnData, function (item, value) {
                        send_list[item] = value;
                    });
                }
            });
            console.log(send_list);
            console.log('length:' + Object.keys(send_list).length);
            return 1;//just for returning
        }
    });
</script>

Основываясь на сообщении, я подумал, что мне нужно использовать другую переменную для записи длины, например:

<script>    
$(function () {
        var table_id = $('#table_id').text();
        var list_length = $.words_list(table_id);
    });

    jQuery.extend({
        'words_list': function (id) {
            var send_list = {};
            var list_length = 0;// add a variable

            $.ajax({
                type: 'GET',
                url: '/get_wordslist/' + id,
                success: function (returnData) {
                    $.each(returnData, function (item, value) {
                        send_list[item] = value;
                        list_length++;//record increase
                    });
                }
            });
            console.log(send_list);
            console.log('length:' + list_length);//show
            return 1;//just for returning
        }
    });
</script>

Но вывод был тот же. И я сравниваю с простым кодом, подобным этому:

var dict = {
    "Jeremy": 20,
    "Jimmy": 30
};
console.log(dict);
console.log(Object.keys(dict).length);

Вот вывод:

пример вывода

Это мой ожидаемый результат. Согласно сообщению, я думаю, что добавление элементов для динамического диктования является причиной проблемы. Но я попытался использовать переменную для записи длины, тоже не удалось. Теперь я понятия не имею, чтобы решить эту проблему. Пожалуйста, помогите мне и скажите мне, почему, сначала спасибо.

Answer 1

Поскольку ajax является асинхронным, поэтому в момент, когда вы console.log('length:' + list_length);, функция успеха еще не запущена. Чтобы получить ожидаемый результат, вам нужно войти в функцию успеха. Как то так:

var send_list = {};
var list_length = 0;// add a variable

$.ajax({
   type: 'GET',
   url: '/get_wordslist/' + id,
   success: function (returnData) {
      $.each(returnData, function (item, value) {
         send_list[item] = value;
         list_length++;//record increase
      });
      // Log here
      console.log(send_list);
      console.log('length:' + list_length);
   }
});