AngularJS - 使用 angular.forEach 和 console.log 循环遍历数组是不可预测的

Question

这是一个邮政编码猜测应用程序，使用 FireBase 和 Angular 构建。对于用户输入的每个数字，都会对 FireBase 数据库进行查询，该数据库会返回一个包含邮政编码的数组，这些邮政编码在相应的位置具有相应的数字（第 3-48 行）。然后调用 newGuess() 函数。对于每个输入了数字的输入，返回的数组被放置在一个名为 compareArray 的数组中（第 50 - 66 行）。 compareArray 的长度（第 76 行）决定了接下来会发生什么，这就是我试图遍历每个嵌套数组的地方。这是我似乎无法逾越的砖墙。数组不会打印出来。我使用 $scope 错了吗？它似乎遍历了一些数组 时间，但不是全部。这是否意味着数组可能无法及时填充？

需要注意的是，compareArray和resultsArray都已经被放入到$scope对象的外面和外面，结果是一样的。我还使用了一个常规的 for 循环来尝试遍历数组，但是 angular.forEach 循环似乎比它更频繁地工作。

最终目标是，一旦我们知道 compareArray 中嵌套了多少个数组，我们就能够将它们拉出，遍历它们，并比较它们是否有相似的邮政编码。这些邮政编码存在于所有返回的数组中，然后放入 resultsArray 中，并随机选择一个。计算机使用这个随机的邮政编码来“猜测”用户住在哪里。

我也意识到有些部分代码并不像它们可能的那样 DRY。我计划先让代码工作，然后花时间重构。对此的任何建议也表示赞赏。

我还将链接到 github。唯一相关的其他文件是 app.js 和 index.html 文件。

https://github.com/nhwilcox/zip-code_angular

zipCodeApp.controller('ZipCodesCtrl', function ZipCodesCtrl($scope, $firebaseArray) {

    var ref = new Firebase('https://zip-it.firebaseio.com/zips');

    $scope.detectChangeDigit1 = function() {
        var query = ref.orderByChild("digit1").equalTo($scope.zipCode.firstDigit.toString());
        $scope.digit1Array = $firebaseArray(query);
        $scope.digit1Array.$loaded().then(function() {
            $scope.digit1Array.sort();
        });
        newGuess();
    };

    $scope.detectChangeDigit2 = function() {
        var query = ref.orderByChild("digit2").equalTo($scope.zipCode.secondDigit.toString());
        $scope.digit2Array = $firebaseArray(query);
        $scope.digit2Array.$loaded().then(function() {
            $scope.digit2Array.sort();
        });
        newGuess();
    };

    $scope.detectChangeDigit3 = function() {
        var query = ref.orderByChild("digit3").equalTo($scope.zipCode.thirdDigit.toString());
        $scope.digit3Array = $firebaseArray(query);
        $scope.digit3Array.$loaded().then(function() {
            $scope.digit3Array.sort();
        });
        newGuess();
    };

    $scope.detectChangeDigit4 = function() {
        var query = ref.orderByChild("digit4").equalTo($scope.zipCode.fourthDigit.toString());
        $scope.digit4Array = $firebaseArray(query);
        $scope.digit4Array.$loaded().then(function() {
            $scope.digit4Array.sort();
        });
        newGuess();
    };

    $scope.detectChangeDigit5 = function() {
        var query = ref.orderByChild("digit5").equalTo($scope.zipCode.fifthDigit.toString());
        $scope.digit5Array = $firebaseArray(query);
        $scope.digit5Array.$loaded().then(function() {
            $scope.digit5Array.sort();
        });
        newGuess();
    };

    var newGuess = function() {
        var compareArray = []
        if (typeof $scope.zipCode.firstDigit !== "undefined") {
            compareArray.push($scope.digit1Array);
        }
        if (typeof $scope.zipCode.secondDigit !== "undefined") {
            compareArray.push($scope.digit2Array);
        }
        if (typeof $scope.zipCode.thirdDigit !== "undefined") {
            compareArray.push($scope.digit3Array);
        }
        if (typeof $scope.zipCode.fourthDigit !== "undefined") {
            compareArray.push($scope.digit4Array);
        }
        if (typeof $scope.zipCode.fifthDigit !== "undefined") {
            compareArray.push($scope.digit5Array);
        }

        var resultsArray = [];

        // if there is only one number, only one query is needed, and it can be
        // assigned to the results array.
        // if there are two numbers, we need two queries, and the resulting arrays
        // need to be checked against each other to find zipcodes that are only
        // present in both arrays.

        if (compareArray.length === 1) {
            console.log("1!");
            resultsArray = compareArray[0];
            angular.forEach(compareArray[0], function(value, key) {
                console.log(value);
            });
        } else if (compareArray.length === 2) {
            console.log("2!");
            angular.forEach(compareArray[0], function(value, key) {
                console.log(value);
            });
            angular.forEach(compareArray[1], function(value, key) {
                console.log(value);
            });
        } else if (compareArray.length === 3) {
            console.log("3!");
            angular.forEach(compareArray[0], function(value, key) {
                console.log(value);
            });
            angular.forEach(compareArray[1], function(value, key) {
                console.log(value);
            });
            angular.forEach(compareArray[2], function(value, key) {
                console.log(value);
            });

        } else if (compareArray.length === 4) {
            console.log("4!");
        } else if (compareArray.length === 5) {
            console.log("5!");
        }
        $scope.resultsArray = resultsArray;
    }
});

Answer 1

我猜这是时间问题。将 newGuess() 调用放在 .then() 中，这应该可以解决它。