持续运行ajax请求的更好方法

Question

我目前得到了以下代码，它将运行一堆ajax请求（40-50），然后再次执行所有请求。（本质上永远这样做）

代码：

 $(document).ready(function () {
        window.setInterval(function () {
            $('div.env').each(function (index, item) {
                var vm = $(item).text();                    
                var env = "http://localhost:56656/HTML" + vm + ".htm";
                $.ajax(env, {
                    async: false,
                    URL: env,
                    type: "GET",
                    dataType: "html",
                    success: function (data) {
                        //alert("Colouring");
                        var style = $(data).filter('div').attr('style');
                        var styleObj = {};
                        $.each(style.split(';'), function () {
                            var rule = this.split(':');
                            styleObj[$.trim(rule[0])] = $.trim(rule[1]);
                        });
                        $(item).css('background', styleObj.background);
                    },
                    error: function () {
                        $(item).css('background', '#f00');
                    }
                });
            });
        }, 10000);
    });

正如你所看到的，我目前使用的超时在IE上运行得特别慢，有时在chrome上运行得很慢。当我说慢时，我的意思是所有的ajax请求都将完成，然后屏幕将随着更新而刷新。IE上一直都是这种情况，偶尔Chrome也会出现这种情况。理想情况下，我希望ajax完成它的请求，更新后再执行下一个ajax请求。

有什么更好的方法可以不断地处理AJAX请求吗？

提前感谢您，James

Answer 1

您可能想要使用Caolan的异步库。你的代码可能是这样的（当然包括async.js之后）：

$(document).ready(function () {
    function call() {
        var calls = [];
        $('div.env').each(function (index, item) {
            calls.push(function(callback) {
                $.ajax({
                    // DO NOT USE async: false!!!!
                    // some ajax settings
                    complete : function() {
                        callback();
                    }
                });
            });
        });
        async.parallel(calls, function() {
            /* This will fire when every call finishes.
               You may want to add timeout here, or else
               you will end up flooded with requests. */
            call();
        });
    };
});

您应该根据需要调整它（async也可以处理错误，请阅读文档）。你说你希望他们一个接一个地开火，所以用async.series而不是async.parallel。

BTW这段代码：

$.ajax({
    async: false

纯粹的邪恶阻止所有其他脚本甚至整个浏览器！！！这可能就是你"行动迟缓"的原因。

Answer 2

不确定在您的情况下是否可能，但像SignalR或Node.Js+Socket.IO这样的websocket/长轮询解决方案通常比连续轮询工作得更好。

Answer 3

您应该使用setTimeout()而不是setInterval()，并执行以下操作：

• 如果请求失败，请执行任意操作：）
• 如果请求成功，则使用setTimeout()调用

Answer 4

我认为这是一个架构问题，而不是其他问题。

我建议重新构建结构，将数组发送到服务器，并将响应组合到一个html页面或json对象中

原因很明显，无论你做什么，40-50个并发ajax请求请求肯定会很慢，因为即使你的ajax成功处理程序（你绑定到成功的功能）在10ms内完成（由于其复杂性，它肯定不在IE上），40个请求意味着至少有400ms的独占时间，导致客户端性能问题。在您的情况下，

async: false

甚至将请求时间添加到独占时间中，因此，如果您的请求在10ms内完成（极不可能），您将使用另外400ms的客户端独占时间。

因此，在客户端搜索解决方案并不是一个真正的选择。