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

Question

我的 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> 运行后才运行

Answer 1

您可以在从服务器收到响应后动态地将脚本元素附加到文档中，如下所示：

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

您只需将这些 jquery 代码放入 .js 文件中。

Answer 2

听起来像是一个异步问题...

你在哪里关闭标题？

</head>

你的 onload 事件在哪里同步？

<body onload="Function_That_KickStarts_Everything();">

Answer 3

请使用正确的文档结构，并确保一切都以 ONLOAD 事件开始，以便第 3 方库可以全部加载和同步...请按照此操作：

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