Javascript函数同步答案

【问题标题】：Javascript function synchronisationJavascript函数同步
【发布时间】：2016-05-06 10:22:31
【问题描述】：

我目前正在为大学做最后一年的项目。我正在制作一个 UI，它从数据库中获取数据，然后使用用户输入操作数据以生成图形。

事件的顺序是：DataCtrl 使用 HTTP get 从数据库中获取数据。然后将数据存储在 dataFactory 中。然后 RadioCtrl 将查找用户输入以进行选择。然后将其存储在 userFactory 中。

我想要做的是创建一个函数来比较来自 dataFactory 的数据与来自 userFactory 的输入，但是它不断出现 dataFactory 未定义。我知道我需要实现某种承诺/延迟，但我从来没有使用过，而且我正在学习 Javascript，所以我不太确定如何做到这一点，或者这是否是最好的方法它。我的代码如下，任何问题或建议将不胜感激。

app.factory('dataFactory', function() {
var data = [];
var ids = [];
var areas = [];
var speakers = [];
var nonSpeakers = [];
var notStated = [];
var highestEd = [];
var gender = [];
var labourPop = [];

//Array of functions for data
var dataService = {};

dataService.getData = function(response) {
    data.push(response);
    response.forEach(function(element){
        ids.push(element.id);
        areas.push(element.area);
        labourPop.push(element.labourPop);
        speakers.push(element.irishSpeakers);
        nonSpeakers.push(element.nonIrishSpeakers);
        notStated.push(element.notStated);
        highestEd.push(element.highestEd);
        gender.push(element.gender);
    })
};

dataService.list = function(){
    return data;
}
return dataService;
});

app.factory('userFactory', function (){
var education;
var gender;
var location;
var graph;
//Add user input functions here
var userService = {
};

userService.filter = function(dataFactory) {

     dataFactory.ids.forEach(function(element){
        if(education ===dataFactory.highestEd[element])
            graph.push(dataFactory.data[element]);
    })

    console.log(dataFactory.ids);
};

return userService;
});

app.controller('GraphCtrl', function(dataFactory, userFactory){
userFactory.filter(dataFactory);
});

app.controller ('DataCtrl', function(dataFactory, $http) {
$http.get("http://localhost:6698/ngdemo/rest/users")
.then(function(response) {
    dataFactory.getData(response.data);
})
});

app.controller('RadioCtrl', function(userFactory) {
userFactory.education = {
    education : ''
};
userFactory.gender = {
    gender : ''
};
userFactory.location = {
        location : ''
};      
});

【问题讨论】：

.then() 中的代码在其他所有内容之后被调用。可能是您的比较代码在 dataFactory.getData(response.data) 之前运行。解决方案是在 dataFactory.getData(response.data) 之后在 .then() 内部开始比较。

标签： javascript angularjs undefined user-input angular-promise

【解决方案1】：

我认为你应该添加

var app = angular.module('myApp', []);

到你的 app.js 那么你的 html 应该是这样的：

    <html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS </title>

    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="DataCtrl">

  </body>


</html>

【讨论】：

我已经有一个工作网站。我只是显示与用户输入相关的代码。这完全不相关。

【解决方案2】：

你可以尝试使用Promise

var compare = new Promise( function(resolve, reject){
  // here goes synchronous code

  if ( /* compare string */ ) {
    resolve( data );
  } else {
    reject( error );
  }
});

compare.then( function(data){
  /* do something with data */
}).catch( function( error ){
  throw new Error( error )
});

【讨论】：

这个例子中的数据是什么？我在网上看到过类似的例子，但在我的情况下，我在进行比较之前已经从数据库中检索了数据，所以我不知道我在解决什么问题。同样，在 .then 函数中，我会直观地进行比较，因为数据肯定存在（而不是未定义）。