javascript - Parse.com query.find 成功回调中的参数

Question

感谢您提前提供的帮助。我正在使用 Phonegap 和 Javascript 进行练习作业。长话短说:我需要使用 Parse.com 来存储有关一些乐高小人仔的信息。我现在遇到的问题主要是由于我缺乏 Javascript 经验。

我正在努力让用户向图形添加标签。用户输入它们，用逗号分隔，然后我分割字符串。工作正常。

现在，我需要将尚不存在的标签添加到我的数据库中。为此，我搜索具有该描述的任何标签(使用 query.find)，然后，如果存在，我不会创建它，我只是修改关系。如果它不存在，我将创建它，然后修改关系。

我的问题是:我似乎无法从 query.find 的成功回调中访问标签描述(字符串)。我很确定这是因为范围的原因。除了结果数组之外，是否有任何正确的方法可以通过成功回调访问变量？

我当前的代码如下:

                var Figure = Parse.Object.extend("Figure");
                var Tag = Parse.Object.extend("Tag");
                var nombre = $('#nombre').val();
                var serie = $('#serie').val();
                var figure = new Figure({"Name":nombre,"Series":serie});
                var tags = $('#tags').val();
                res = tags.split(","); //split the 
                figure.save().then(function() {
                    for (var i = 0; i < res.length; i++) { //for each tag

                        var query = new Parse.Query(Tag); //create the query.
                        query.equalTo("Description", res[i]);
                        query.find( {//execute query                                
                            success: function(results, res[i]) {
                             if (results.length > 0){ //if there are results.
                                var tag = results[0]; //get the tag
                                var relation_tag = tag.relation("figures"); //get the relation
                                relation_tag.add(figure); //add figure to relation
                                tag.save();
                              }
                             else { //if there are no results, the tag does not exist.
                                new_tag = new Tag({"Description":res[i]}); 
                               //ABOVE THIS LINE: res[i] is always undefined.
                                var relation_tag = new_tag.relation("figures"); //get the relation
                                relation_tag.add(figure); //add the figure
                                new_tag.save();
                              }
                            },
                            //error with query
                            error: function() {
                             alert("ERROR");
                            }


                        });     

                    }                                           


                }, function(error) {

                    alert("No se pudo guardar la figura");

                });

在成功回调中，res[i]始终未定义，我认为这是由于范围的原因。

Answer 1

这是异步 Javascript 编程中非常常见的问题。你正在做这样的事情:

for (var i = 0; i < array.length; i++) {
    anAsyncFunction(function(result) { // inner function
        doSomethingWith(array[i]);
    }
}

问题在于，在 Javascript 函数中，通过引用而不是通过值存储外部变量，这意味着函数在执行时而不是定义时从外部作用域查找变量的值。由于代码是异步的，因此在 for 循环完成后调用内部函数，此时我们有 i === array.length，因此 array[i] === array[ array.length] === 未定义。

为了避免这种情况，您可以使用立即调用的函数表达式(IIFE，发音为“iffy”):

for (var i = 0; i < array.length; i++) {
    anAsyncFunction((function(j) { // IIFE
        return function innerFunction(result) { // inner function
           doSomethingWith(array[j]); // j instead of i
       }
    })(i); // passing "value of i"
}

因为立即调用 IIFE，所以当前值 i 被传递并存储到 j 中，并且当内部函数执行时，它使用正确的值。

所以在你的情况下这应该有效:

success: (function(j) { // IIFE
    return function(results) {
        if (results.length > 0) {
            var tag = results[0];
            var relation_tag = tag.relation("figures");
            relation_tag.add(figure);
            tag.save();
        }
        else { //if there are no results, the tag does not exist.
            new_tag = new Tag({"Description":res[j]}); // j instead of i
             var relation_tag = new_tag.relation("figures");
            relation_tag.add(figure);
            new_tag.save();
        }
    }
})(i) // pass "value of i"

如果您愿意，您还可以将描述本身而不只是索引传递给 IIFE(我想我会这样做):

success: (function(description) { // IIFE
    return function(results) {
        if (results.length > 0) {
            var tag = results[0];
            var relation_tag = tag.relation("figures");
            relation_tag.add(figure);
            tag.save();
        }
        else { //if there are no results, the tag does not exist.
            new_tag = new Tag({"Description":description}); // description
             var relation_tag = new_tag.relation("figures");
            relation_tag.add(figure);
            new_tag.save();
        }
    }
})(res[i]) // pass description