Асинхронный с streetViewService - сбой при использовании обратного вызова

Question

Я написал JS-скрипт для получения ближайших позиций Street View для заданных точек (широта, долгота). У меня проблема с (как мне кажется) функцией обратного вызова.

Вот код:

  
    
    
    

  
  
      
      Contents of the file:
      

GID, lat_from, lon_from

>

function readSingleFile (e) { var file = e.target.files [0]; if (! file) { вернуть; } var reader = new FileReader (); reader.onload = function (e) { var contents = e.target.result; processFile (содержимое, returnFile) }; reader.readAsText (файл); } результат = ""; function processFile (содержимое, обратный вызов) { var text = содержание var splitted = text.split ('\ r \ n') splitted.forEach (function (point) { var gid = point.split (';') [0] var latilong = point.split (';') [1] .replace (/ [\] / g, '') var splitted2 = latilong.split (':') var lat = splitted2 [1] .split (',') [0] var lon = splitted2 [2] .split ('}') [0] var latilong = new google.maps.LatLng (lat, lon); // alert (latilong) радиус радиуса = 20 var streetViewService = new google.maps.StreetViewService (); streetViewService.getPanoramaByLocation (длина, радиус, функция (данные, статус) { if (status == google.maps.StreetViewStatus.OK) { var nearStreetViewLocation = data.location.latLng; result = result + gid + ',' + JSON.stringify (nearStreetViewLocation) .replace (/ [\ "\} \ {lat long \:] / g, '') + ''; $ (".container") .append (результат); $ (".container") .append ('
'); } еще { $ (".container") .append ("

" + gid + ', 0' + "

"); } }); }); if (callback) { обратный вызов (результат); } } функция returnFile (результаты) { if (результаты) { $ (".container") .append ('
из функции обратного вызова: '); $ (".container") .append (результаты); } еще { оповещение («результат равен нулю»); } } document.getElementById ( 'файл-вход') .addEventListener ('change', readSingleFile, false);

Вы можете запустить скрипт с заданным текстовым файлом в качестве примера:

7512 ; {lat:52.2254802729, lon:21.0105694375}
7513 ; {lat:52.2254556313, lon:21.0104179005}
7563 ; {lat:52.2245593608, lon:21.0063570311}

Как видите, переменная results в функции returnFile пуста (предупреждение о том, что results пусто). Он не пуст в функции processFile (инкрементное содержимое отображается в ". Container" ) и передается в функции processFile в returnFile функция.

Как это можно исправить? Я думал, что такого обратного вызова будет достаточно, чтобы передать непустую переменную из функции processFile .

Я бы хотел обработать переменную result в функции returnFile после ее заполнения внутри processFile .

Ура!

Answer 1

Похоже, я решил эту проблему с помощью счетчика в forEach (как там сказано: Обратный вызов после завершения всех асинхронных обратных вызовов forEach ) и вот код:

  
    
    Directly accessing Street View data
    
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    
    
    

  
  
      
      Contents of the file:
      

gid, lat_from, lon_from

> function readSingleFile (e) {var file = e.target.files [0];if (! file) {return;} var reader = new FileReader ();reader.onload = function (e) {var contents = e.target.result;processFile (content, returnFile)};reader.readAsText (файл);} result = "";function processFile (contents, callback) {var text = content var splitted = text.split ('\ r \ n') $ (".container") .append ("splitted length:" + splitted.length + "
«);var itemsProcessed = 0;splitted.forEach (function (point) {var gid = point.split (';') [0] var latilong = point.split (';') [1] .replace (/ [\] / g, '')var splitted2 = latilong.split (':') var lat = splitted2 [1] .split (',') [0] var lon = splitted2 [2] .split ('}') [0] var latilong = новый Google.maps.LatLng (lat, lon); // alert (latilong) var radius = 20 var streetViewService = new google.maps.StreetViewService (); streetViewService.getPanoramaByLocation (latilong, radius, function (data, status) {itemsProcessed ++; если(status == google.maps.StreetViewStatus.OK) {var nearStreetViewLocation = data.location.latLng; // alert (nearStreetViewLocation) // $ (".container") .append ("

" + gid + ','+ JSON.stringify (nearStreetViewLocation) .replace (/ [\ "\} \ {lat long \:] / g,' ') +"

"); // console.log (gid +', '+JSON.stringify (nearStreetViewLocation) .replace (/ [\ "\} \ {lat long \:] / g, '')) result = result + gid + ',' + JSON.stringify (nearStreetViewLocation) .replace (/ [\ "\} \ {lat long \:] / g, '') + '
'; $ (" .container ") .appeй (результат);$ (".container") .append ('«);$ (".container") .append ("обработано элементов:" + itemsProcessed);if (itemsProcessed === splitted.length) {обратный вызов (результат);}} else {$ (".container") .append ("

" + gid + ', 0' + "

");}});});// if (callback) {// callback (result);//}} function returnFile (results) {if (results) {alert ('results not null');$ (".container") .append ('из функции обратного вызова: ');$ (".container") .append (результаты);} else {alert ('results is null');}} document.getElementById ('file-input') .addEventListener ('change', readSingleFile, false);// points5 = [{lat: 52.2254802729, lng: 21.0105694375}, // {lat: 52.2254556313, lng: 21.0104179005}, // {lat: 52.2245593608, lng: 21.0063570311}, // {lat: 52.2245355399, lng: 21.0062524, // {lat: 52.2245125335, lng: 21.0061437961}];// // points5.forEach (function (point) {// // $ (".container") .append ("

" + JSON.stringify (point, null) .replace (/ \ "/ g,'') + "

"); // //}); // var radius = 20 // var streetViewService = new google.maps.StreetViewService (); // points5.forEach (function (point) {// streetViewService.getPanoramaByLocation (точка, радиус, функция (данные, статус) // {// if (status == google.maps.StreetViewStatus.OK) // {// var nearStreetViewLocation = data.location.latLng; // alert(nearStreetViewLocation) // $ (".container") .append ("

" + JSON.stringify (nearStreetViewLocation) .replace (/ [\ "\} \ {lat long \:] / g, '') +"

"); // return nearStreetViewLocation //} // else {// alert ("error") //} //}); //});