时间戳

首页 > 解决方案 > 在 JavaScript 仍在执行代码时显示图标

javascript - 在 JavaScript 仍在执行代码时显示图标

问题描述

我有一些 JavaScript 从 URL 获取数据，然后用循环遍历结果forEach。

该操作可能需要一分钟才能完成，因此我想在页面上显示一个加载符号，以向用户表明他们不应该与页面交互。

function getFloodAreaPolygon() {
    let request = new XMLHttpRequest();
    let url = floodAreaData[0].polygon;
    request.open("GET", url, true);

    request.onload = function () {
        let data = JSON.parse(this.response);
        if (request.status >= 200 && request.status < 400) {
            data.features.forEach(geojsonFeature => {
                loadFloodAreaPolygon(geojsonFeature);
            });
        } else {
            console.log("error");
        }
    };
    request.send(null);
}

我写了一些代码displayLoadingIcon()来显示图标并hideLoadingIcon()隐藏它。

我认为如果我在函数的开头显示图标并在request.send(null)调用后隐藏它，那么它会在函数的长度内持续存在，但是图标几乎立即消失。

我怎样才能解决这个问题？

编辑：为了清楚起见，不是 AJAX 请求需要一分钟才能完成，而是forEach循环中包含的处理，loadFloodAreaPolygon(geojsonFeature)将结果转换为传单标记对象。

标签： javascriptforeachxmlhttprequest

解决方案

假设 loadFloodAreaPolygon 也不是异步的，你可以这样做

function getFloodAreaPolygon() {
  displayLoadingIcon(); // here 
  let request = new XMLHttpRequest();
  let url = floodAreaData[0].polygon;
  request.open("GET", url, true);

  request.onload = function() {
    let data = JSON.parse(this.response);
    if (request.status >= 200 && request.status < 400) {
      data.features.forEach(geojsonFeature => {
        loadFloodAreaPolygon(geojsonFeature);
      });
      hideLoadingIcon(); // here
    } else {
      console.log("error");
    }
  };
  request.send(null);
}

如果它是异步的，那么你可以这样做

      data.features.forEach((geojsonFeature,i) => {
        loadFloodAreaPolygon(geojsonFeature);
        if (i === data.features.length-1) hideLoadingIcon();
      });

或将测试传递给函数：

      data.features.forEach((geojsonFeature,i) => {
        loadFloodAreaPolygon(geojsonFeature,i === data.features.length-1);
      });

并将 hideLoadingIcon() 移动到 loadFloodAreaPolygon 成功

推荐阅读