Массив сообщений Ajax, когда он заполнен

У меня есть глобальная переменная var distances = []. У меня есть функция, чтобы заполнить его, но это занимает некоторое время. И я хочу отправить его в представление Django, когда оно будет заполнено. Однако из-за асинхронной работы JS я всегда отправляю пустой массив. Как я могу отправить заполненный массив без установки времени ожидания? Мой js-код

var distances = [] //array where some digits will be stored

function getAllDistances() //function where this digits being put in distances arr
//note that every digit is result of request to API of routing service so it takes 
//some time to get thing done

function ajaxTest(){//function for sending array to Django view
    $.ajax({
        url:'test/',
        type:'POST',
        data:JSON.stringify({distances : distances}),
        dataType: 'json',
        success:function (data) {
            console.info("Ajax test success");
            console.info(data.result.text);//view should return some result
        },

        error:function () {
            console.info("Ajax test failure")
        }
    })
}

function doTheJob(){ //main function 
    getAllDistances();
    ajaxTest();
}

Итак, с запросом все в порядке, но он всегда отправляет пустой массив. Можно ли заставить js отправлять заполненный массив без установки времени ожидания? Я думаю, обратный вызов здесь поможет, но поправьте меня, если я ошибаюсь


Чтобы было понятнее, я добавлю функцию, которая вычисляет расстояния.

function getRoutSummary(i, j, q) {
                    var url = 'https://router.project-osrm.org/route/v1/driving/' +
                            coords[i][1] + ',' + coords[i][0] + ';' +
                            coords[j][1] + ',' + coords[j][0] +
                            '?geometries=geojson';
//coord is array of arrays with coordinates like
//[[lat1, long1], [lat2, long2], [lat3, long3]] where lat is latitude and long 
//is longtitude

                    var req = new XMLHttpRequest();    
                    req.responseType = 'json';    
                    req.open('GET', url, true);    
                    req.onload = function () {
                        var jsonResponse = req.response;
                        var distance = jsonResponse.routes[0].distance;
                        distances[q] = distance;
                    };
                    req.send();
            }

И затем я вызываю эту функцию в цикле

function getAllDistances(){
                var q = 0;
                for (var i = 0; i < coords.length; i++){
                    for (var j = 0; j < coords.length; j++){
                        getRoutSummary(i, j, q);
                        q = q + 1;
                    }
                }
                console.info(distances);
            }

Выполняет ли getAllDistances некоторую асинхронную работу, чтобы заполнить массив? Если это так, то вы должны вызвать ajaxTest с заполненным массивом, когда асинхронный ответ поступил в getAllDistances. Возможно, вы ищете это: Как вернуть ответ на асинхронный вызов?

lealceldeiro 28.05.2019 14:02

Вам нужно будет реализовать какой-то обратный вызов, который будет прямо или косвенно вызываться getAllDistances(), когда он завершит выполнение своей задачи; ajaxTest() будет вызываться этим обратным вызовом. Это можно реализовать с помощью async/await, Promise или путем передачи обратного вызова в качестве параметра.

Haroldo_OK 28.05.2019 14:06

При каких условиях «расстояния» считаются полными? Как узнать, когда каждая запись в массиве заполнена? Вы знаете это заранее?

Lewis 28.05.2019 14:16

@ Льюис, ну, в основном да. Чтобы было более понятно, у меня есть 4 точки на карте, я использую API службы маршрутизации, чтобы получить расстояния от одной точки до другой, и я получаю 16 результатов. Таким образом, длина массива будет равна 16 после выполнения работы.

indeedme 28.05.2019 14:19

Затем, если у вас нет обратного вызова, который вы можете использовать, альтернативой может быть использование setInterval() и проверка длины массива.

Lewis 28.05.2019 14:21

Как вы вызываете API службы маршрутизации? Вероятно, это будет хорошее место для обратного вызова. Может быть, вы могли бы добавить этот фрагмент кода к вопросу, чтобы мы могли его проанализировать.

Haroldo_OK 28.05.2019 14:33

Я отредактировал вопрос с большим количеством кода

indeedme 28.05.2019 14:42
req.onload было бы отличным местом для добавления обратного вызова, но вам нужно будет подсчитывать, сколько обратных вызовов вернулось, чтобы запустить последний обратный вызов, когда коллекция будет полностью собрана.
Haroldo_OK 28.05.2019 14:48
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
8
447
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте обещания с Promise.all()

distancePromise = [];

function getAllDistances() {
//a loop
var promise = getSingleDistance();
distancePromise.push(promise);
//return a array of promises
return distancePromise
}
//send the distances after all the promises have been resolved
Promise.all(distancePromise).then(function(distances) {
//save the distances
})

Другие вопросы по теме