Как использовать «document.getElementById» с динамическим var? - PullRequest
0 голосов
/ 21 июня 2019

У меня есть следующий код, который мне дал пользователь "no-deps" .... Как общая идея, я хочу получить информацию из переменной с широтой и долготой точки на карте Google, получая в секундупеременная информация о названии места с определенными координатами карты.

Проблема в том, что код работает так же хорошо, как и возвращает значение poi, но это происходит в первом только div в json процессе.

Я думаю, что путь должен определять с помощью динамического значения указанную переменную document.getElementById() и в качестве второго шага определить <div id="'+postid+'"></div> с той же динамической переменной ...

Я имеюпробовал, но это, как я сделал, не имеет никакого результата .....

Код следующий:

<script type='text/javascript'>
        //<![CDATA[ 
function favouritePosts(json) {
var post_id;
var Lat_long;               // dynamic var with lang and lat information

fetch('https://open.mapquestapi.com/geocoding/v1/reverse?key=jzZATD7kJkfHQOIAXr2Gu0iG62EqMkRO&location='+Lat_long+'')
        .then((data) => {
            return data.json();
        })
        .then((json) => {
                const result = json.results[0].locations[0];
          document.getElementById("output").innerHTML= result.street&","&result.postalCode;
        })
        .catch((err) => {
            console.log(err);
        });
var item = '<div id="'+postid+'"></div>';
        document.write(item);
        }
}
 //]]>
 </script>

1 Ответ

2 голосов
/ 21 июня 2019

Первое, что вам следует знать, это то, что Javascript является однопоточным.

Поскольку он однопоточный, он может делать только одну вещь за один раз.

Чтобы предотвратить блокирование браузерана выполнение кода, который делает больше времени, например, запрос http, браузер предоставляет веб-API.

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

Возвращаясь к вашей ситуации, функция Fetch является асинхронным методом.Вы можете получить данные json только в функции обратного вызова, потому что функция обратного вызова выполняется после вашего синхронного кода, который является вашим последним кодом строки, вставленным в описание вопроса.

Надеюсь, это поможет!

...