javascript - 仅在另一个脚本完成后运行脚本

问题描述

我的 HTML 标头中有多个脚本。两个令人关注的问题如下：

1) JS 脚本（'Infected Data'）产生一个带有数据的对象。数据是从谷歌脚本文件中检索和计算的，所以自然需要一点时间。

2) 生成地图的脚本。该地图根据受感染对象数据的值进行颜色编码。

问题是地图在我得到对象之前加载，所以它没有颜色。

地图应如下所示：地图如下所示：

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>运行

标签： javascriptjqueryasynchronouspromiseasync-await

javascript - 仅在另一个脚本完成后运行脚本

问题描述

解决方案

推荐阅读