使用带有延迟对象数组的jQuery.when会导致局部变量发生奇怪的事情

时间:2012-11-13 21:09:40

标签: jquery-deferred

假设我有一个网站通过HTTP呼叫保存电话号码服务,该服务返回电话号码条目的新ID以绑定到页面上的电话号码。

在这种情况下,电话存储在一个名为“telephones”的数组中,datacontext.telephones.updateData将电话发送到服务器内的$ .Deferred([服务调用逻辑])。promise();

uploadTelephones = function (deffered) {
                for (var i = 0; i < telephones.length; i++){
                        deffered.push(datacontext.telephones.updateData(telephones[i], {
                            success: function (response) {
                                telephones[i].telephoneId = response;                                    
                            },
                            error: function () {
                                logger.error('Stuff errored');
                            }
                        }));                            
                 }
            }

现在,如果我打电话:

function(){
    var deferreds = [];
    uploadTelephones(deferreds);
    $.when.apply($, deferreds)
                    .then(function () {
                        editing(false);
                        complete();
                    },
                    function () {
                        complete();
                    });
}

发生了一件奇怪的事。所有电话都被送回服务并保存。当调用uploadTelephones方法中的“成功”回调并将新id作为“响应”时,无论查询涉及哪个电话,i的值始终是telephones.length + 1和行

telephones[i].telephoneId = response; 

因电话[i]不存在而抛出错误。

有人能告诉我如何在成功回调中保持i的个别价值吗?

1 个答案:

答案 0 :(得分:3)

所有闭包(捕获本地作用域中的变量的匿名函数)引用相同的索引变量,循环执行后其值为telephones.length。你需要的是为for循环的每次传递创建一个不同的变量,在创建的实例中保存i的值,以供以后使用。

要创建一个新的不同变量,最简单的方法是创建一个匿名函数,其代码是捕获循环中特定位置的值并立即执行它。

要么:

for (var i = 0; i < telephones.length; i++)
{
    (function () {
        var saved = i;
        deffered.push(datacontext.telephones.updateData(telephones[saved],
        {
            success: function (response)
            {
                telephones[saved].telephoneId = response;
            },
            error: function ()
            {
                logger.error('Stuff errored ');
            }
        }));
    })();
}

或者这个:

for (var i = 0; i < telephones.length; i++)
{
    (function (saved) {
        deffered.push(datacontext.telephones.updateData(telephones[saved],
        {
            success: function (response)
            {
                telephones[saved].telephoneId = response;
            },
            error: function ()
            {
                logger.error('Stuff errored ');
            }
        }));
    })(i);
}  

应该有效。

现在,这有点难看。由于您已经一遍又一遍地执行匿名函数的过程,如果您希望您的代码更清晰一点,您可能需要查看Array.forEach并使用传入的任何参数,或者只需使用jQuery.each,因为您已经在使用jQuery。