Код JavaScript пропускает обратный вызов другой функции

Я пишу функции в своем файле JavaScript для вывода адреса. Это не самый чистый вариант, но он работал до того, как возникла моя текущая проблема. Я пытаюсь использовать callback и получить адрес, но когда я записываю адрес в console, это undefined. Я не уверен, что делаю не так.

function calculateDistance(vnames, vlocations) {
    // PROGRAM NEVER GOES THROUGH THIS???
    clientLoc((address) => {
        var origin = address;
        alert("Address: " + address);
    });
    // PROGRAM NEVER GOES THROUGH THIS???

    console.info("my location is: " + origin);

    var venueNames = vnames,
    venueLocs = vlocations,
    service = new google.maps.DistanceMatrixService();

    // 5. Output band name and distance
    // Matrix settings
    service.getDistanceMatrix(
        {
            origins: [origin],
            destinations: venueLocs,
            travelMode: google.maps.TravelMode.DRIVING, // Calculating driving distance
            unitSystem: google.maps.UnitSystem.IMPERIAL, // Calculate distance in mi, not km
            avoidHighways: false,
            avoidTolls: false
        },
        callback
    );

    // Place the values into the appropriate id tags
    function callback(response, status) {
        // console.info(response.rows[0].elements)
        // dist2 = document.getElementById("distance-result-2"),
        // dist3 = document.getElementById("distance-result-3");

        for(var i = 1; i < response.rows[0].elements.length + 1; i++) {
            var name = document.getElementById("venue-result-" + i.toString()),
            dist = document.getElementById("distance-result-" + i.toString());

            // In the case of a success, assign new values to each id
            if (status= = "OK") {
                // dist1.value = response.rows[0].elements[0].distance.text;
                name.innerHTML = venueNames[i-1];
                dist.innerHTML = response.rows[0].elements[i-1].distance.text;
            } else {
                alert("Error: " + status);
            }
        }
    }
}

Это функция, которую я использую в callback:

// Find the location of the client
function clientLoc (callback) {
    // Initialize variables
    var lat, lng, location

    // Check for Geolocation support
    if (navigator.geolocation) {
        console.info('Geolocation is supported!');

        // Use geolocation to find the current location of the client
        navigator.geolocation.getCurrentPosition(function(position) {
            console.info(position);
            lat = position.coords.latitude;
            lng = position.coords.longitude;

            // Client location coordinates (latitude and then longitude)
            location = position.coords.latitude + ', ' + position.coords.longitude
            // console.info(location)

            // Use Axios to find the address of the coordinates
            axios.get('https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyAg3DjzKVlvSvdrpm1_SU0c4c4R017OIOg', {
                params: {
                    address: location,
                    key: 'AIzaSyBH6yQDUxoNA3eV81mTYREQkxPIWeZ83_w'
                }
            })
            .then(function(response) {
                // Log full response
                console.info(response);

                var address = response.data.results[0].formatted_address;
                // Return the address
                console.info(address);
                //return clientLoc.address;

                // CALLBACK
                callback(address);
            })
        });
    }
    else {
        console.info('Geolocation is not supported for this Browser/OS version yet.');
        return null;
    }
}
Поведение ключевого слова "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
0
46
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

функция, имеющая обратный вызов, не блокирует выполнение, поэтому вызывается ваша функция clientLoc и, предположительно, если этот код работает, переменная origin будет установлена, и ваш вызов предупреждения будет срабатывать ... НО код ниже clientLoc не ждет вызов clientLoc для завершения ... он выполняет остальную часть функции ... при условии, что я не слишком знаком с синтаксисом es6, но концепция та же. Вероятно, вы захотите переместить console.info («мое местоположение:» + origin); и любой код, который полагается на исходную переменную, установленную внутри обратного вызова, чтобы сделать его более чистым, используйте некоторые обещания

Спасибо! Изначально меня беспокоило, что остальная часть кода не дожидалась готовности запроса местоположения. Я переместил код за пределы обратного вызова clientLoc внутри него. Как бы вы сделали его чище с помощью обещаний?

Will Yaj 25.04.2018 19:34
stackoverflow.com/questions/22519784/…
markS 25.04.2018 20:21

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