javascript - 在向前迭代之前等待调用函数完成

Question

对于我必须编写的代码，我有点困惑。目前我正在尝试遍历字符串数组。找到某个文本后，如果某个值为 true，则将该值绑定(bind)到临时Object.img。之后，必须对服务器进行调用，以便检索某些信息并将其绑定(bind)到同一个临时对象作为第二个属性 (temporaryObject.url)。不幸的是，调用可能在迭代完成后得到解析，因为它没有添加此调用将 url 添加到对象中的服务器。我使用的库是 angularjs 和 jquery。

这是我编写的部分代码。

$scope.Data = [];
var strArray = ["img1", "link", "img2", "link2", "img3", "link3"];
var re1 = /<img/;
for(var i = 0 ; i < strArray.length ; i++) {
    var tempObject = {};
    var test = re1.test(strArray[i]);
    if (test){
    tempObject.img = strArray[i + 1];
    myAngularService.getServerInformation().then(function(result){
        tempObject.url = result;
        $scope.Data.push(tempObject);
    }
   }

不幸的是，来自服务器的信息不会在迭代完成的同时到达，或者出现问题，因为 $scope.Data 不会包含从服务器请求的 url。任何有关如何使用此类代码的 promise 的建议将不胜感激。我尝试搜索所有可能的解决方案，但没有成功。

Answer 1

Javascript 是函数范围的。换句话说:

if (true) {
    var testing = 5;
}
console.log(testing); // Logs 5

将此应用到您的示例中，您的 .then 回调函数中的 tempObject 都引用相同的变量!

一种解决方案是在 for 语句中使用立即调用函数表达式 (IIFE) 来创建新作用域:

for(var i = 0 ; i < strArray.length ; i++) {
    (function() {
        var tempObject = {}; // Is now declared within the new function
        /* ... code here ... */
    })();
}

另一个解决方案是简单地使用 $.each (或angular.forEach):

$.each(strArray, function(index, value) {
    var tempObject = {}; // Is now declared within the new function
    /* ... code here ... */
}); 

关于等待所有调用完成，一种解决方案是将您的 promise 存储在数组中，使用 Angular 的 $q服务:

$scope.Data = [];
var promises = [];
var strArray = ["img1", "link", "img2", "link2", "img3", "link3"];
var re1 = /img/;
$.each(strArray, function (index, value) {
    var tempObject = {};
    var test = re1.test(value);
    if (test) {
        tempObject.img = strArray[index + 1];

        var myPromise = myAngularService.getServerInformation();

        myPromise.then(function (result) {
            tempObject.url = result;
            $scope.Data.push(tempObject);
        }

        promises.push(myPromise);
    }
})

$q.all(promises).then(function() {
    // All calls will have finished
    console.log($scope.Data); 
}, function() {
    // At least 1 call failed!
    console.log("an error occurred!");
});