JavaScript jQuery действия выполняются в неправильном порядке

Question

Проблема такая: я пытаюсь загрузить файл с диска в JavaScript с помощью jQuery, получить оттуда список category_colors, скопировать его в переменную, и вывести эту переменную в консоль. Но почему-то действия выполняются в обратном порядке: сначала JS создает переменную с пустым списком, затем выводит этот пустой список в консоль, и потом только записывает туда данные из файла.

Вот код:

var category_colors = []

$(document).ready(function() {
    $.getJSON('../data/test.json', function(jd) {
        category_colors = [...jd.category_colors]
        console.log(category_colors) // Выводит () [{...}, {...}, {...}, {...}, {...}], как и задумано
    });
});

console.log(category_colors) // Выводит []

Хотелось бы сразу сказать, что перемещение console.log(category_colors) внутрь $(document).ready не помогает, js продолжает выводить пустоту:

var category_colors = []

$(document).ready(function() {
    $.getJSON('../data/test.json', function(jd) {
        category_colors = [...jd.category_colors]
        console.log(category_colors) // Выводит () [{...}, {...}, {...}, {...}, {...}], как и задумано
    });
    console.log(category_colors) // Выводит []
});

Почему так происходит?

Answer 1

Так происходит, потому что метод getJSON является асинхронным. Т.е. последовательность выполнения кода в вашем случае такая: сначала JS создает переменную с пустым списком, затем вызывается метод getJSON и запрос улетает, но при этом НЕ ожидается ответ, а продолжается выполнение кода, т.е. выводит этот пустой список в консоль, а уже КОГДА придет ответ на запрос, будет вызван колбэк, который был передан в качестве аргумента методу getJSON. Так работает, чтобы не блокировать основной поток ожиданиями выполнения длительных операций. Т.к. getJSON является оберткой для метода $.ajax, то вы можете реализовать свою задумку с его помощью, а он может работать в синхронном режиме. Почитайте здесь: Is it possible to set async:false to $.getJSON call. Но сразу скажу, что это плохое решение: лучше разберитесь как работает асинхронный код и используйте его, это необходимая база.

БЛОГ НА HUSL

JavaScript jQuery действия выполняются в неправильном порядке

Ответы (1 шт):