Отображение значка при выполнении кода JavaScript - PullRequest
Новая
       8

Отображение значка при выполнении кода JavaScript

0 голосов
/ 14 июля 2020

У меня есть JavaScript, который извлекает данные из URL-адреса, а затем перебирает результаты с помощью forEach l oop.

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

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, выполнение которого занимает около минуты, это обработка, содержащаяся в the forEach l oop, где loadFloodAreaPolygon(geojsonFeature) преобразует результаты в объект маркера Leaflet.

Ответы [ 2 ]

1 голос
/ 14 июля 2020

Предполагая, что loadFloodAreaPolygon НЕ является асинхронным c, вы можете сделать 

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);
}

Если он IS asyn c, тогда вы можете выполнить 

      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

0 голосов
/ 14 июля 2020

Попробуйте разместить функции вот так. 

count = 0;
function getFloodAreaPolygon() {
    displayLoadingIcon();
    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);
            if (count == data.features.length-1) hideLoadingIcon();
            count++;
            });
        } else {
            console.log("error");
            hideLoadingIcon();
        }
    };
    request.send(null);
}

Спасибо

...