循环内的异步 ajax 调用无法按预期工作答案

【问题标题】：Asynchronous ajax call within a loop doesn't work as expected循环内的异步 ajax 调用无法按预期工作
【发布时间】：2013-06-28 09:39:23
【问题描述】：

我正在开发一个基于网络的内部工具

我需要根据数组值生成一系列 ajax 调用。我之前是同步的，如果我这样做，那么它会阻塞浏览器，所以我无法在 ajax 运行时显示加载图像。

因此，我将调用更改为异步，现在发生的情况是 ajax 调用正在进行，并且响应与 UI 中的所有调用相同，但如果我在 firebug 中检查响应是否清晰，如果我在循环中添加一些警报，那么它工作正常。

我发布了代码以供进一步参考

// calling the function within loop
$.each(texts, function (tind, tval) {
                    setTimeout(function () {
                        txtcmpare(tval, search_logo, ask_logo, option_logo);
                    },2000);
                });

//the function which calls ajax (txtcmpare)
function txtcmpare(actval, sl, al, ol) {
                var tch_locale = new Array();
                var tch_tempname = new Array();

                    if (actval != "==" && actval != "") {
                        avail = 0;
                        tparam = actval;

                        //respout = findloacle(param);
                       setTimeout(function () {
                            findloacle(tparam, function (y) {
                                // my operations
                                 });
                              },2000);
                           }
                         if I put some alert here, sometimes response are clear
                          }

//the ajax function
function findloacle(locparam,callback) {
                //var loc = new Array();
                $.ajax({
                    type: "POST",
                    url: "Services/Locale.asmx/ajaxresp",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ queryparam: locparam }),
                    dataType: "json",
                    cache: false,
                    success: function (data) {
                        //loc = result.d;
                        callback(data);

                    },
                    error: function () {
                        alert("error");
                    }

                });
                //return loc;
            }

【问题讨论】：

标签： jquery ajax asynchronous

【解决方案1】：

尝试在循环内应用闭包：

$.each(texts, function (tind, tval) {
    (function (_tval) {
        setTimeout(function () {
            txtcmpare(_tval, search_logo, ask_logo, option_logo);
        }, 2000);
    }(tval));
});

【讨论】：

保持内部变量的引用（值），否则异步调用可以使用最后一个值，而不是当前值。但我不确定这在这种情况下是否可行，因为我没有详细检查足够的代码并且使用超时可能是这里的问题
我了解闭包的一般概念；）我只是不知道为什么要在这里添加一个。您保留的唯一值是 locparam，它既不会在函数内更改，也不会被回调使用。
更新的答案，在这里看起来更合适，即使我不知道其他变量应该是什么
可变范围是问题 - 已修复
但事情不是按顺序排列的......有没有办法进行异步调用，因为顺序意味着一个接一个？？？

【解决方案2】：

我自己也遇到了类似的问题。我在 while 循环中运行了一系列 ajax 请求。有些电话没有被打！它杀了我！我的结论是我的浏览器——谷歌浏览器——忽略了“重复”请求。

看看这个伪代码：

while (i < ajaxCallArray.length) {
    currentAjaxObject = ajaxCallArray[i];
    ajaxPost = $.post(currentAjaxObject.url, function(data) {
    //response data needs to go into a function such that each request gets its own "data" variable created.otherwise it just overwrites data!!
    processAjaxResponse(data, currentAjaxObject);
        },"json");
i++;
}

如果 ajaxCallArray[0].url = "http://www.google.com"、ajaxCallArray[1].url = "http://www.google.com" 和 ajaxCallArray[2].url = "http://www.google.com" 浏览器实际上只会进行 1 次调用！！

即使您不使用这些 url 参数，您也必须执行 ajaxCallArray[0].url = "http://www.google.com?count=0"、ajaxCallArray[1].url = "http://www.google.com?count=0" 和 ajaxCallArray[2].url = "http://www.google.com?count=0" 之类的操作，只需添加一些内容以使它们与众不同。这样浏览器将处理所有调用，即使它们是立即完成的。

希望这会有所帮助！

【讨论】：