无法理解 javascript 中嵌套事件中的闭包/范围

Question

我正在编写一个 Angular 应用程序，并且必须确定一个图层是否可以作为 GPX 或 KML（地理数据 XML 文件）加载。然后我返回成功加载的图层。但是，当我在 .on(ready) 事件（成功事件）中时，我无法终生弄清楚如何将变量设置为 true。这是我的代码：

(function() {
'use strict';

angular
    .module('TractNotes')
    .factory('xmldataService', xmldataService);

xmldataService.$inject = [];

/* @ngInject */
function xmldataService() {
    var isKML = false;
    var isGPX = false;

    var service = {
        getxmldata: getxmldata
    };
    return service;

    ////////////////

    function getxmldata(layer) {
        var kml = omnivore.gpx('this will fail')
            .on('ready', function() {
                isKML = true;
            })
            .on('error', function() {
                console.log("This is not a KML layer.")
            })

        var gpx = omnivore.gpx(layer)
            .on('ready', function() {
                isGPX = true;
            })
            .on('error', function() {
                console.log("This is not a GPX layer.")
            });

        if(isKML){
            return kml;
        }
        else if(isGPX){
            return gpx;
        }
        else{
            return 'invalid file';
        }
        // @TODO: use desc xml tag as layer name
    }
}
})();

当代码运行时，console.logs 可以正常工作，但它永远不会返回任何内容，因为布尔值从未正确设置。任何理解这一点的帮助表示赞赏。

传单杂食文档：https://github.com/mapbox/leaflet-omnivore

Answer 1

嗯，这并不容易。当您运行服务功能时，“就绪”事件尚未触发，因此布尔值处于错误状态。所以他们返回“无效文件”。我建议重构您的服务以返回 Promise 而不是值。看看Promise on MDN。然后在 promise 解决后执行你的代码。

更新：

来看看jsfiddle上的例子

function xmlDataService() {
  var service = {
    getxmlData: getxmlData
  };
  return service;

  function getxmlData(layer) {
    return new Promise(
      function(resolve, reject) {
        console.log('Promise started');
        var serviceCreated = false;
        var optionsCount = 2;
        var optionsFailed = 0;

        // First service
        window.setTimeout(
          function() {
            if (!serviceCreated) {
              serviceCreated = true;
              resolve('First service created');
            }
          }, Math.random() * 2000 + 1000); // at least a second

        // Second Service
        window.setTimeout(
          function() {
            if (!serviceCreated) {
              serviceCreated = true;
              resolve('Second service created');
            }
          }, Math.random() * 2000 + 1000);
      }
    );
  }
}

关于范围：

$scope.createService= function() {
  $scope.message = "Creating a Service";
  var promise = xmlDataService.getxmlData();
  promise.then(function(val) {
    console.log('Promise resolved');
    // Apply result on scope, since it been executed out of scope.
    $scope.$apply(function(){
      $scope.message = val;
    });
  });
}