Question

我读过很多关于async不是用户友好的文章，但是在我删除异步时，一切都搞砸了，因为它需要逐个执行。

for (var k = 0; k < selectedValueArr.length - 1; k++) {
    var value = selectedValueArr[k];
    $.ajax({
        type: "POST",
        url: dm + "Services/AjaxService.asmx/GetCityCheck",
        dataType: "json",
        data: JSON.stringify({ code: value }),
        contentType: "application/json; charset=utf-8",
        async: false,
        success: function(data) {
            html += '<li style="height: 25px;"><div style="font-weight: bold; background-color: #91c8e2; padding: 3px 3px; font-size: 13px;">' + document.getElementById('stateName' + selectedValueArr[k]).innerHTML + '</div></li>';
            var datafromServer = jQuery.parseJSON(data.d.toString());
            $.each(datafromServer, function(key, value) {
                html += '<li style="height: 18px; font-size: 12px;"><span pvalue="' + key + '"><input id="chkCity' + key + '" type="checkbox" title="' + value + '" style="border: 0px;" onchange="javascript:CityCheck(this)"><span title="' + value + '" id="cityName' + key + '">' + value + '</span></span></li>';
            });
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
}

任何人都可以告诉我什么是async的替代品，因为它确实挂起了浏览器......

Answer 1

这是一个建议：不是在循环中用许多AJAX请求锤击你的服务器，最好在单个AJAX请求中发送所有数据，即使有更多数据将通过线路传输。最小化服务器往返次数总是更好。

因此，摆脱for循环，然后发送一个AJAX请求：

$.ajax({
    type: 'POST',
    url: dm + 'Services/AjaxService.asmx/GetCityCheck',
    data: JSON.stringify({ codes: selectedValueArr }),
    contentType: 'application/json; charset=utf-8',
    success: function(data) {
        // work with data.d directly here, don't do any $.parseJSON
        // see below for how you need to modify your WebMethod for
        // this to work
        ...
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus);
    }
});

然后修改你的WebMethod，使它将数组作为输入参数并返回一个数组作为输出：

[WebMethod]
public SomeModel[] GetCityCheck(string[] codes)
{
    ...    
}

请注意，如果您的WebMethod直接返回模型而不是字符串，则您不需要在成功回调中执行任何jQuery.parseJSON，而是直接使用data.d。

如果您不想遵循我的建议并在循环中使用AJAX请求终止服务器，则必须在闭包中捕获k索引器变量：

for (var k = 0; k < selectedValueArr.length - 1; k++) {
    (function(i) {
        var value = selectedValueArr[i];
        $.ajax({
            type: "POST",
            url: dm + "Services/AjaxService.asmx/GetCityCheck",
            dataType: "json",
            data: JSON.stringify({ code: value }),
            contentType: "application/json; charset=utf-8",
            context: value,
            success: function(data) {
                html += '<li style="height: 25px;"><div style="font-weight: bold; background-color: #91c8e2; padding: 3px 3px; font-size: 13px;">' + document.getElementById('stateName' + this).innerHTML + '</div></li>';
                var datafromServer = jQuery.parseJSON(data.d.toString());
                $.each(datafromServer, function(key, value) {
                    html += '<li style="height: 18px; font-size: 12px;"><span pvalue="' + key + '"><input id="chkCity' + key + '" type="checkbox" title="' + value + '" style="border: 0px;" onchange="javascript:CityCheck(this)"><span title="' + value + '" id="cityName' + key + '">' + value + '</span></span></li>';
                });
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    })(k);
}

还要注意我如何将context参数用于AJAX请求，以便将值传递给成功回调。然后在这个成功回调中我用selectedValue[k]替换了它，因为当前的上下文现在是不同的。这是从$ .ajax调用的外部上下文向成功回调传递信息的正确方法。

Answer 2

你可以尝试这样做：
- 删除异步：fals
- 移除for循环
- 重写您的服务器方法以接受多个“代码”并输出结果数组
- 立即向服务器发送所有请求的“代码” - 当你得到你的结果时，迭代每个'代码'结果并做它，你想做什么

jquery中的异步替换

2 个答案: