Запускать скрипт только после завершения другого - PullRequest
Новая
       23

Запускать скрипт только после завершения другого

1 голос
/ 02 февраля 2020

У меня есть несколько сценариев в заголовке HTML. две проблемы следующие:

1) сценарий JS («зараженные данные») создает объект с данными. Данные извлекаются и вычисляются из файла скриптов Google, поэтому, естественно, это занимает немного.

2) Скрипт, который генерирует карту. Карта имеет цветовую кодировку в зависимости от значений данных зараженного объекта.

Проблема в том, что карта загружается до того, как я могу получить объект, поэтому она не окрашена.

Карта должна выглядеть так: enter image description here Карта выглядит следующим образом : enter image description here

HTML Заголовок: 

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <title>JQVMap - World Map</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

        <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="../dist/jquery.vmap.js"></script>
        <script type="text/javascript" src="../dist/maps/jquery.vmap.world.js" charset="utf-8"></script>
        <script type="text/javascript" src="js/jquery.vmap.sampledata.deaths.js"></script>
        <script type="text/javascript" src="js/jquery.vmap.sampledata.infected.js"></script>


        <script>





          jQuery(document).ready(function () {
            jQuery('#vmap').vectorMap({
              map: 'world_en',
              backgroundColor: '#333333',
              color: '#ffffff',
              hoverOpacity: 0.8,
              selectedColor: '#3498DB',
              enableZoom: true,
              showTooltip: true,
              scaleColors: ['#F3A291', '#FF4F3B'],
              values: infected_data,
              normalizeFunction: 'polynomial',
              onLabelShow: function(event, label, code)
        {
          // Remove for Russian Joke
            /*if (code == 'ru')
            {
                // Plain TEXT labels
                label.text('Bears, vodka, balalaika');
            }

            else*/


                label.html('<div class="map-tooltip"><h1 class="header">'+label.html()+'</h1><p class="description">Infected: '+infected_data[code]+'</p><p class="description">Deaths: '+death_data[code]+'</p></div>');


            /*else if (code == 'us')
            {

                label.html(label.html()+' (GDP - '+sample_data[code]+')');
            }*/
        },
        /*onRegionOver: function(event, code)
        {
            if (code == 'ca')
            {
                event.preventDefault();
            }
        },            */
            });
          });
        </script>







</head>

Зараженные данные JS Файл: 

    var infected_dataINT = {};
var infected_data = {};
  const url = "https://script.google.com/macros/s/AKfycbzsyQNJwDvQc5SvNGEDZZOoNI3XxNar9PA9sRucZx7mgzfWpFQ/exec";

  // Declare an async function
  const getData = async () => {
  // Use the await keyword to let JS know this variable has some latency so it should wait for it to be filled 
  // When the variable is fetched, use the .then() callback to carry on 
    const DataJSON = await fetch(url).then(response => 
      response.json()
    )

    return await DataJSON
  };



  console.log(getData());

  getData().then(result => {
    console.log(result);
    infected_dataINT = result;
    console.log(infected_dataINT);

    function toString(o) {
      Object.keys(o).forEach(k => {
        if (typeof o[k] === 'object') {
          return toString(o[k]);
        }

        o[k] = '' + o[k];
      });

      return o;
    }

    console.log(toString(infected_dataINT));
    infected_data = toString(infected_dataINT);

  })

Как я могу замедлить jQuery(document).ready(function () {.... для запуска только после того, как <script type="text/javascript" src="js/jquery.vmap.sampledata.infected.js"></script> запустил

Ответы [ 3 ]

2 голосов
/ 02 февраля 2020

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

let script = document.createElement('script');
script.src = 'myJqueryFile.js';
document.head.appendChild(script);

Вам просто нужно поместить эти jquery коды в a. js файл.

0 голосов
/ 02 февраля 2020

Пожалуйста, используйте правильную структуру документа и убедитесь, что все начинается с события ONLOAD, чтобы сторонние библиотеки могли загружаться и синхронизироваться ... выполните следующие действия: 

<html>

<head>

 <style type="text/css">

 </style>

</head>

<body onload="Function_That_KickStarts_Everything();">

 <script src="Third_Party_Library_1.js"></script>

 <script src="Third_Party_Library_2.js"></script>


 <script type="text/javascript">

 </script>


</body>

</html>
0 голосов
/ 02 февраля 2020

Звучит как проблема асинхронности ...

Где вы закрываете заголовок? 

</head>

А где ваше событие onload для синхронизации вещей? 

<body onload="Function_That_KickStarts_Everything();">
...