在继续循环之前等待AJAX​​完成?

时间:2014-04-22 06:06:35

标签: javascript jquery ajax

为什么每当我在for循环中放入ajax时,它都不能很好地同步?

例如,我的代码是:

    function addToUserGroupList() {
        _root.qDomId('js-assignGroupArrBtn').disabled = true

        for (var i = 0; i < selectedIds.length; i++) {
            $.ajax({
                type: "POST",
                url: 'groupManage.ashx',
                dataType: 'text',
                data: 'type=getInfo&groupId=' + selectedIds[i],
                success: function (result) {
                    if (result != '') {
                        this.groupName = result.split('&')[0];
                        this.groupNotes = result.split('&')[2];

                        userGroupList.push({ 'uid': parseInt(selectedIds[i]),
                            'name': this.groupName,
                            'adminStr': this.groupNotes
                        });

                        _root.userListObj.gourpInst.gourpTB(userGroupList);
                    }
                },
                error: function (XMLHttpRequest, status, errorThrown) {
                    alert('failed to add to user\'s group.');
                }
            });
        }

        _root.qDomId('js-assignGroupArrBtn').disabled = false;
        selectedIds = [];
    }

为什么它在Ajax查询之前首先调出selectedIds = [];? 是否可以在执行selectedIds = [];之前让ajax查询完成?因为它在完成这些工作之前就清除了阵列。 :/

1 个答案:

答案 0 :(得分:5)

首先,你真的需要了解Ajax调用是如何异步的(这就是Ajax中的“A”代表的)。这意味着调用$.ajax()只会启动ajax调用(它将请求发送到服务器),其余的代码会愉快地继续运行。有时在执行其余代码后LATER,当响应从服务器返回时,将调用成功或错误回调处理程序。这不是顺序编程,必须采用不同的方式。

这意味着#1意味着你想要在ajax调用之后发生的任何事情必须在成功或错误处理程序中或从那里调用。 ajax调用之后的代码将在ajax调用完成之前很久就运行。


因此,有不同的方法来构建代码以使用此异步概念。如果您一次只想要一次异步ajax调用,则必须进行此重组,并且不能使用简单的for循环。相反,您可以创建索引变量,并在完成函数中,递增索引并启动下一次迭代。这是编码的一种方法:

function addToUserGroupList() {
    _root.qDomId('js-assignGroupArrBtn').disabled = true

    var i = 0;
    function next() {
        if (i < selectIds.length) {
            $.ajax({
                type: "POST",
                url: 'groupManage.ashx',
                dataType: 'text',
                data: 'type=getInfo&groupId=' + selectedIds[i],
                success: function (result) {
                    i++;
                    if (result != '') {
                        this.groupName = result.split('&')[0];
                        this.groupNotes = result.split('&')[2];

                        userGroupList.push({ 'uid': parseInt(selectedIds[i]),
                            'name': this.groupName,
                            'adminStr': this.groupNotes
                        });

                        _root.userListObj.gourpInst.gourpTB(userGroupList);
                    }
                    next();
                },
                error: function (XMLHttpRequest, status, errorThrown) {
                    alert('failed to add to user\'s group.');
                }
            });
        } else {
            // last one done
            _root.qDomId('js-assignGroupArrBtn').disabled = false;
            selectedIds = [];
        }
    }
    // kick off the first one
    next();
}