javascript - 如何异步运行函数？-6ren

javascript - 如何异步运行函数？

转载作者：行者123 更新时间：2023-12-01 08:31:16

我有一个array

coords = [];

然后我运行这个函数

    getVirusData();

    function getVirusData() {
      getAvailableDatasets()
      .then(combineDatasets)
      .then(data => { // It's asynchronous
        coords.push.apply(coords, data.map(item => item.Lat +"," + item.Long));
      });
    }

    function getAvailableDatasets() {
      return $.getJSON('https://api.github.com/repos/CSSEGISandData/COVID-19/contents/csse_covid_19_data/csse_covid_19_time_series')
        .then((files) => {
          return Promise.all(
            files.filter(file => /^time_series_19-covid-.+\.csv$/.test(file.name))
            .map(file => getDataset(file.download_url))
          );
        })
        .catch(function(err) {
          console.log(err);
        })
    }

    function getDataset(url) {
      return $.ajax(url)
        .then(csv => {
          const output = Papa.parse(csv, {
            header: true, // Convert rows to Objects using headers as properties
            dynamicTyping: true, // Convert some fields to Numbers automatically
          });
          if (output.data) {
            const labelMatches = url.match(/time_series_19-covid-(.+)\.csv$/);
            const label = labelMatches ? labelMatches[1] : "Untitled";

            const formatted = output.data.map(area => {
              const obj = {};

              Object.keys(area).forEach(key => {
                if (/^\d+\/\d+\/\d+$/.test(key)) {
                  obj[key] = { date: key, [label]: area[key] };
                } else {
                  obj[key] = area[key];
                }
              });

              return obj;
            });



            return formatted;
          } else {
            console.log(output.errors);
          }
        });
    }

    function combineDatasets(datasets) {
      if (datasets.length) {
        const combined = datasets.reduce((result, dataset, i) => {
          if (i === 0) { return result; }
          dataset.forEach(area => {
            // Look for area with same coordinates
            let existingArea = result.find(a => a.Lat === area.Lat && a.Long === area.Long);
            if (!existingArea) {
              result.push(area);
            } else {
              const dates = Object.keys(area).filter(key => /^\d+\/\d+\/\d+$/.test(key));
              dates.forEach(date => existingArea[date] = Object.assign(area[date], existingArea[date]));
            }
          });
          return result;
        }, datasets[0]);

        return combined.map(area => {
          const obj = { data: [] };

          Object.keys(area).forEach(key => {
            if (/^\d+\/\d+\/\d+$/.test(key)) {
              obj.data.push(area[key]);
            } else {
              obj[key] = area[key];
            }
          });

          return obj;
        });
      } else {
        throw "No datasets were found";
      }
    }

然后在将所有值插入数组后，我需要运行它

    drawMarkers();

    function drawMarkers() {
      for (var a = 0; a < coords.length; ++a) {
          var pin = coords[a].split(',');
          var latLng = new google.maps.LatLng(pin[0], pin[1]);
          var marker = new google.maps.Marker({
            position: latLng
          });
       }
      }

当我运行时drawMarkers();我没有得到任何标记，如果我 console.log(pin) for loop之后我什么也没得到，因此一定有一个 asynchronous问题

更新完整代码

      (function($) {

        var markers = [],
          circle,
          latitude = [],
          longitude = [],
          datesExternal = [],
          links = [],
          years = [],
          type = [],
          coords = [],
          oggetti = [],
          scuole = [],
          privati = [],
          markerCluster,
          ids = [],
          currentSite = [],
          author = [],
          site = [],
          titles = [];

        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 40.600486, lng: 9.261252},
          zoomControl: true,
          zoom: 2,
          minZoom: 2,
          maxZoom: 18,
          noClear: true,
          zoomControlOptions: {
            position: google.maps.ControlPosition.LEFT_CENTER
          },
          styles: [
                    {
                        "featureType": "administrative",
                        "elementType": "all",
                        "stylers": [
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative",
                        "elementType": "geometry.fill",
                        "stylers": [
                            {
                                "visibility": "off"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative",
                        "elementType": "geometry.stroke",
                        "stylers": [
                            {
                                "weight": "1.00"
                            },
                            {
                                "color": "#ffffff"
                            },
                            {
                                "visibility": "off"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative",
                        "elementType": "labels.text.fill",
                        "stylers": [
                            {
                                "color": "#484848"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative.country",
                        "elementType": "all",
                        "stylers": [
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative.country",
                        "elementType": "geometry.stroke",
                        "stylers": [
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative.country",
                        "elementType": "labels.text.fill",
                        "stylers": [
                            {
                                "color": "#484848"
                            },
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative.province",
                        "elementType": "all",
                        "stylers": [
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative.province",
                        "elementType": "labels.text.fill",
                        "stylers": [
                            {
                                "color": "#484848"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative.locality",
                        "elementType": "all",
                        "stylers": [
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative.neighborhood",
                        "elementType": "all",
                        "stylers": [
                            {
                                "visibility": "off"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative.neighborhood",
                        "elementType": "labels.text.fill",
                        "stylers": [
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative.land_parcel",
                        "elementType": "all",
                        "stylers": [
                            {
                                "visibility": "off"
                            }
                        ]
                    },
                    {
                        "featureType": "landscape",
                        "elementType": "all",
                        "stylers": [
                            {
                                "color": "#e2e2e2"
                            },
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "landscape",
                        "elementType": "labels",
                        "stylers": [
                            {
                                "color": "#484848"
                            }
                        ]
                    },
                    {
                        "featureType": "landscape.natural",
                        "elementType": "all",
                        "stylers": [
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "landscape.natural",
                        "elementType": "labels.text.fill",
                        "stylers": [
                            {
                                "color": "#484848"
                            }
                        ]
                    },
                    {
                        "featureType": "poi",
                        "elementType": "all",
                        "stylers": [
                            {
                                "visibility": "off"
                            }
                        ]
                    },
                    {
                        "featureType": "road",
                        "elementType": "all",
                        "stylers": [
                            {
                                "visibility": "off"
                            }
                        ]
                    },
                    {
                        "featureType": "road.local",
                        "elementType": "all",
                        "stylers": [
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "transit",
                        "elementType": "all",
                        "stylers": [
                            {
                                "visibility": "off"
                            }
                        ]
                    },
                    {
                        "featureType": "water",
                        "elementType": "all",
                        "stylers": [
                            {
                                "color": "#ededed"
                            }
                        ]
                    }
                ],
          draggable: true,
          clickable: true,
          streetViewControl: false,
          rotateControl: false,
          fullscreenControl: false,
          scrollwheel: false,
          animatedZoom: false,
          navigationControl: false,
          mapTypeControl: false,
          scaleControl: false
        });


getVirusData();

function getVirusData() {
  getAvailableDatasets()
    .then(combineDatasets)
    .then(data => { // It's asynchronous
      coords.push.apply(coords, data.map(item => item.Lat + "," + item.Long));
    }).then(function(entry) {
      for (var a = 0; a < coords.length; a++) {
        var pin = coords[a].split(',');
        console.log(pin);
        var latLng = new google.maps.LatLng(pin[0], pin[1]);
        var marker = new google.maps.Marker({
          position: latLng
        });
      }
    });
}

function getAvailableDatasets() {
  return $.getJSON('https://api.github.com/repos/CSSEGISandData/COVID-19/contents/csse_covid_19_data/csse_covid_19_time_series')
    .then((files) => {
      return Promise.all(
        files.filter(file => /^time_series_19-covid-.+\.csv$/.test(file.name))
        .map(file => getDataset(file.download_url))
      );
    })
    .catch(function(err) {
      console.log(err);
    })
}

function getDataset(url) {
  return $.ajax(url)
    .then(csv => {
      const output = Papa.parse(csv, {
        header: true, // Convert rows to Objects using headers as properties
        dynamicTyping: true, // Convert some fields to Numbers automatically
      });
      if (output.data) {
        const labelMatches = url.match(/time_series_19-covid-(.+)\.csv$/);
        const label = labelMatches ? labelMatches[1] : "Untitled";

        const formatted = output.data.map(area => {
          const obj = {};

          Object.keys(area).forEach(key => {
            if (/^\d+\/\d+\/\d+$/.test(key)) {
              obj[key] = {
                date: key,
                [label]: area[key]
              };
            } else {
              obj[key] = area[key];
            }
          });

          return obj;
        });



        return formatted;
      } else {
        console.log(output.errors);
      }
    });
}

function combineDatasets(datasets) {
  if (datasets.length) {
    const combined = datasets.reduce((result, dataset, i) => {
      if (i === 0) {
        return result;
      }
      dataset.forEach(area => {
        // Look for area with same coordinates
        let existingArea = result.find(a => a.Lat === area.Lat && a.Long === area.Long);
        if (!existingArea) {
          result.push(area);
        } else {
          const dates = Object.keys(area).filter(key => /^\d+\/\d+\/\d+$/.test(key));
          dates.forEach(date => existingArea[date] = Object.assign(area[date], existingArea[date]));
        }
      });
      return result;
    }, datasets[0]);

    return combined.map(area => {
      const obj = {
        data: []
      };

      Object.keys(area).forEach(key => {
        if (/^\d+\/\d+\/\d+$/.test(key)) {
          obj.data.push(area[key]);
        } else {
          obj[key] = area[key];
        }
      });

      return obj;
    });
  } else {
    throw "No datasets were found";
  }
}

最佳答案

您引用的脚本可能不正确。通过运行以下脚本检查控制台。还将您的 drawMarker 逻辑转移到调用的最后。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

let coords = [];

getVirusData();

function getVirusData() {
  getAvailableDatasets()
    .then(combineDatasets)
    .then(data => { // It's asynchronous
      coords.push.apply(coords, data.map(item => item.Lat + "," + item.Long));
    }).then(function(entry) {
      for (var a = 0; a < coords.length; a++) {
        var pin = coords[a].split(',');
        console.log(pin);
        var latLng = new google.maps.LatLng(pin[0], pin[1]);
        var marker = new google.maps.Marker({
          position: latLng
        });
      }
    });
}

function getAvailableDatasets() {
  return $.getJSON('https://api.github.com/repos/CSSEGISandData/COVID-19/contents/csse_covid_19_data/csse_covid_19_time_series')
    .then((files) => {
      return Promise.all(
        files.filter(file => /^time_series_19-covid-.+\.csv$/.test(file.name))
        .map(file => getDataset(file.download_url))
      );
    })
    .catch(function(err) {
      console.log(err);
    })
}

function getDataset(url) {
  return $.ajax(url)
    .then(csv => {
      const output = Papa.parse(csv, {
        header: true, // Convert rows to Objects using headers as properties
        dynamicTyping: true, // Convert some fields to Numbers automatically
      });
      if (output.data) {
        const labelMatches = url.match(/time_series_19-covid-(.+)\.csv$/);
        const label = labelMatches ? labelMatches[1] : "Untitled";

        const formatted = output.data.map(area => {
          const obj = {};

          Object.keys(area).forEach(key => {
            if (/^\d+\/\d+\/\d+$/.test(key)) {
              obj[key] = {
                date: key,
                [label]: area[key]
              };
            } else {
              obj[key] = area[key];
            }
          });

          return obj;
        });



        return formatted;
      } else {
        console.log(output.errors);
      }
    });
}

function combineDatasets(datasets) {
  if (datasets.length) {
    const combined = datasets.reduce((result, dataset, i) => {
      if (i === 0) {
        return result;
      }
      dataset.forEach(area => {
        // Look for area with same coordinates
        let existingArea = result.find(a => a.Lat === area.Lat && a.Long === area.Long);
        if (!existingArea) {
          result.push(area);
        } else {
          const dates = Object.keys(area).filter(key => /^\d+\/\d+\/\d+$/.test(key));
          dates.forEach(date => existingArea[date] = Object.assign(area[date], existingArea[date]));
        }
      });
      return result;
    }, datasets[0]);

    return combined.map(area => {
      const obj = {
        data: []
      };

      Object.keys(area).forEach(key => {
        if (/^\d+\/\d+\/\d+$/.test(key)) {
          obj.data.push(area[key]);
        } else {
          obj[key] = area[key];
        }
      });

      return obj;
    });
  } else {
    throw "No datasets were found";
  }
}

<script src="https://cdn.jsdelivr.net/npm/papaparse@5.1.1/papaparse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

关于javascript - 如何异步运行函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60584393/

文章推荐： Qt:如何关闭配置文件中的资源压缩？

文章推荐： string - 从字符串中提取代数符号

文章推荐： python - 如何将 pyNetLogo 连接到 netlogo 版本 5

angular - 从批处理文件运行一组命令(运行 VSCode、运行 NG 服务)
好的，所以我想从批处理文件运行我的整个工作环境... 我想要实现什么...... 打开新的 powershell，打开我的 API 文件夹并从该文件夹运行 VS Code 编辑器(cd c:\xy;
单击“运行”按钮时，iOS Xcode 项目不会构建/运行
我正在查看 Cocoa Controls 上的示例并下载了一些演示。我遇到的问题是一些例子，比如 BCTabBarController ，不会在我的设备上构建或启动。当我打开项目时，它看起来很正常，没
c - 运行 C — helloWorld 运行，但没有其他内容 — Ubuntu
我刚刚开始学习 C 语言(擅长 Java 和 Python)。当编写 C 程序(例如 hello world)时，我在 ubuntu cmd 行上使用 gcc hello.c -o hello 编译
php - 从 cron 运行 php 没有作为 CLI 运行
我在 php 脚本从 cron 开始运行到超时后注意到了这个问题，但是当它从命令行手动运行时这不是问题。 (对于 CLI，PHP 默认的 max_execution_time 是 0) 所以我尝试运行
node.js - 如何通过 IntelliJ 运行/调试配置让 wdio 运行？
我可以使用命令行运行测试 > ./node_modules/.bin/wdio wdio.conf.js 但是如果我尝试从 IntelliJ 的运行/调试配置运行它，我会遇到各种不同的错误。 Fea
java - 从 python 运行 bat 文件会返回错误，而直接从 cmd 运行
Error occurred during initialization of VM. Could not reserve enough space for object heap. Error: C
python - 无法从 anaconda 运行 jupyter 笔记本，但可以从 python 运行
将 Anaconda 安装到 C:\ 后，我无法打开 jupyter 笔记本。无论是在带有 jupyter notebook 的 Anaconda Prompt 中还是在导航器中。我就是无法让它工作。
Python 脚本通过双击和 IDLE 运行，但不通过 Windows CMD shell 运行
我遇到一个问题，如果我双击我的脚本 (.py)，或者使用 IDLE 打开它，它将正确编译并运行。但是，如果我尝试在 Windows 命令行中运行脚本，请使用 C:\> "C:\Software_Dev
php - 查询从 postman 和 phpmyadmin 运行，但不是从 android 运行
情况我正在使用 mysql 数据库。查询从 phpmyadmin 和 postman 运行但是当我从 android 发送请求时(它返回零行) 我已经记录了从 android 发送的电子邮件是正确
java - 从 Java 运行 .exe 会提供与直接从 Windows 运行 .exe 不同的控制台输出
所以这个有点奇怪 - 为什么从 Java 运行 .exe 文件会给出不同的输出而不是直接运行 .exe。当 java 在下面的行执行时，它会调用我构建的可与 3CX 电话系统配合使用的 .exe 文
c# - 应用程序在 Visual Studio 的单元测试中以 x86 运行，但在独立时以 x64 运行
这行代码 Environment.Is64BitProcess 当我的应用单独运行时评估为真。但是当它在我的 Visual Studio 单元测试中运行时，相同的表达式的计算结果为 false。我
javascript - 使用 JQuery 运行 AJAX 和使用普通 XMLHttpRequest 运行 AJAX 有什么区别？
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
c - 为什么我的 C 程序可以在 "git bash"运行，但不能在 "cmd"运行？
我写了一个使用 libpq 连接到 PostgreSQL 数据库的演示。我尝试通过包含将 C 文件连接到 PostgreSQL #include 在我将路径添加到系统变量 I:\Program F
java - 从 Jenkins 运行 Android 模拟器以使用 Robotium 运行 Junit 测试
如何从 Jenkins 运行 Android 模拟器来运行我的测试？当我在 Execiute Windows bath 命令中写入时，运行模拟器的命令: emulator -avd Tester 然后
ruby-on-rails - 使用 ngninx 运行 errbit，使用 ssl 运行 passenger
我已经配置好东西，这样我就可以使用 ssl 登录和访问在 nginx 上运行的 errbit 我的问题是我不知道如何设置我的 Rails 应用程序的 errbit.rb 以便我可以运行测试 nginx
ios - flutter app 不是由 flutter build ios 运行，而是由 xcode 运行
我编写了 flutter 应用程序，我通过 xcode 打开了 ios 部分并且应用程序正在运行，但是当我通过 flutter build ios 通过 vscode 运行应用程序时，我得到了这个错误
python - 我的 python 脚本通过我的 IDE (PyCharm) 运行，但无法使用 Python shell 运行
我有一个简短的 python 脚本，它使用日志记录模块和 configparser 模块。我在Win7下使用PyCharm 2.7.1和Python 3.3。当我使用 PyCharm 运行我的脚本时
c# - .NET 2005 - 通过 IIS 的测试作为 x86 运行。单元测试以 x64 运行
我在这里遇到了一些难题。我的开发箱是 64 位的，windows 7。我所有的项目都编译为“任何 CPU”。该项目引用了 64 位版本的第 3 方软件当我运行不使用任何 Web 引用的单元测试时，
c++ 相同的代码从不在 Visual Studio 中编译/运行，有时在 Qt Creator 中编译/运行
当我注意到以下问题时，我正在做一些 C++ 练习。给定的代码将不会在 Visual Studio 2013 或 Qt Creator 5.4.1 中运行/编译报错: invalid types 'd
airflow - 运行 dag 并让 Airflow 运行 : error: the following arguments are required: task_id,execution_date
假设我有一个 easteregg.py 文件: from airflow import DAG from dateutil import parser from datetime import tim

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何异步运行函数？