javascript - 数组在函数外部为空，尝试从数据库中获取数据，在 Javascript 中

Question

我正在尝试使用 Ionic Framework 和 Javascript 构建一个应用程序，并且我想从数组中的表中获取所有数据，但是当我尝试在函数外部访问该数组时，它是空的。我读过一些内容，可能数组在 console.log("length "+ $scope.cards.length); 之后填充，但我不知道如何解决这个问题，所以我可以使用之后的数组。

这是从表中获取数据的函数(有效):

 fetchCards: function(success) {
  database.transaction(function(tx) {
    tx.executeSql("SELECT cardId, name, chosen, filePath, found FROM Cards", [], 
      function (tx, results) {
        console.log('success select ' + results);
        cards = [];
        for (i = 0; i < results.rows.length; i++) {
          cards.push(results.rows.item(i));
        }
        success(cards);
      }, 
      function () {
        console.log('error select');
      });
  });
}

这是我尝试在 Controller 中访问数组的地方:

    .controller('kindergartenController', function($scope, $ionicSideMenuDelegate,service) {

     //list with the difficulties
     $scope.difficultyList=[
     {text:"Easy", value:"easy"},
     {text:"Medium", value:"medium"},
     {text:"Hard", value:"hard"}];

     $scope.data={difficulty:''};

    //redirecting if it presses 
    $scope.goToAnimalsGame = function() {


    if($scope.data.difficulty=='easy'){
      window.location = "#/menu/animalseasy";

      //in this array I want the results
      $scope.cards=[];

      game = new Game(1,"easyAnimalGame");
      console.log("created a new game " + game.getName());
      game.createMemoryGame();

      console.log("difficulty " + $scope.data.difficulty);
      randomNumbers=game.randomNumbers($scope.data.difficulty);
      console.log('Random numbers are:');
      for(i=0;i<randomNumbers.length;i++){
        console.log(randomNumbers[i]);
      }

      //here is where I call the other function, to get data from database
      service.fetchCards(function(cards) {
        $scope.cards = cards;
      //it shows the good length
        console.log("length "+ $scope.cards.length);
      });
      //it shows it's empty
      console.log("length "+ $scope.cards.length);
}

任何建议都有帮助，谢谢。

Answer 1

它将显示为空，因为:

service.fetchCards

是异步的，因此在您定义匿名回调的函数内，在检索数据之前不会触发。

函数外部的 console.log("length ".... 将在函数调用 fetchCards 之后立即执行，但也可能在回调之前执行，其中数组被填充。

不幸的是，您只能处理回调中填充的数组或回调中触发的函数。

以下是帮助执行的时间表:

service.fetchCards();

->

console.log("length "....) 位于上述函数下方

->

service.fetchCards() 内的匿名回调(函数(卡片){})

如果这是有道理的。

服务的异步性意味着您匿名定义的回调可能随时触发。

解决办法:

service.fecthCards(function (data) {
    // do your code
    $scope.cards = cards;
    //it shows the good length
    console.log("length "+ $scope.cards.length);

    // manipulate the array within this function or get it to call another function like so
    nowContinue();
});

function nowContinue() {
    // continue what ever it was that you wanted to do using the newly populated information
}

因为 nowContinue 在匿名回调中被调用，所以只要回调被触发，它就会触发，并且会在您用数据填充 Controller 局部变量后执行。