JavaScript for循环中使用Ajax发送请求

电玩女神 2022-07-16 13:27 379阅读 0赞

**声明：本博文用于学习总结及工作心得**

问题：

以前同事写在前端写有一个聊天的组件，点击该组件会出现一个聊天用户的界面；是用树结构显示的；而调用的function中使用的是for循环加Ajax循环发出请求

最近用户在多用户登录使用gauge组件的时候，造成浏览器假死；因为最开始不知道function中是for循环发送Ajax请求，只有观察服务器状态，一步步调试，

服务器TCP连接出现大量的Time\_Wait 和Close\_Wait;修改服务器配置文件已解决TIME\_WAIT出现过多的原因，而CLOSE\_WAIT则是由于程序代码的问题，比如SOCKET没有释放

就会出现这样的问题；结局我好服务器以后，仔细调试代码。才发现加载树调用的function中使用的是for循环加Ajax循环发出请求；

原因：

Ajax请求默认是异步的,由于JS的for循环与ajax非同步运行，因此导致for循环结束了而ajax却还未执行,如果采用的是异步请求的方式，如果每次迭代的时候都去new一个XMLHttpRequest,因为遍历树，后端处理用到了递归；这样前端for循环在发送请求，而后台在递归，也没有加锁，照成服务器递归不到结点，跳不出递归，而客户端也一直等着浏览器response消息，直到超时，客户端主动断开连接；

看看TCP断开连接的四次握手：

1.Client -> FIN  -> Server     
2.Client <- ACK  <- Server   这时候Client端处于FIN\_WAIT\_2状态；而Server 程序处于CLOSE\_WAIT状态。     
3.Client <- FIN  <- Server   这时Server 发送FIN给Client，Server 就置为LAST\_ACK状态。     
4.Client -> ACK  -> Server   Client回应了ACK，那么Server 的套接字才会真正置为CLOSED状态。      
CLOSE\_WAIT产生于被动关闭的一方，客户端超时以后，发出主动断开连接的请求，而服务器却告诉客户端我还有东西没传给你(之前发出的请求)，这样就照成了大量的CLOSE\_WAIT状态；

解决方法：

1.前端使用递归，一个Ajax请求结束以后执行下一个

2.同步Ajax请求，注意普通的同步是有问题的，一样会造成浏览器假死，使用闭包

我用的第二种:

for (var i = 0; i < groupArray.length; i++) \{  
        setTimeout((function (i) \{  
            return function () \{  
                Ext.Ajax.request(\{  
                    url: 'departmentgetNodesByDept',  
                    method: 'post',  
                    async: false,//同步请求数据  
                    params: \{  
                        groupType: groupArray\[i\].groupType,  
                        id: groupArray\[i\].id,  
                        needCheckbox: needCheckbox,  
                        needIcon: needIcon,  
                        loadSelf: loadSelf,  
                        except: except,  
                        imAccount: public\_IMAccount  
                    \},  
                    success: function (response) \{  
                        var text = Ext.decode(response.responseText);  
                        tree.getRootNode().findChild('text', text.fName).appendChild(text.children);  
                    \},  
                    failure: function (response) \{  
                        Ext.MessageBox.alert('提示', Ext.decode(response.responseText).msg);  
                    \}  
                \});  
            \}  
        \})(i), 10);  
    \}

服务器sysctl配置文件优化TCP连接：

net.ipv4.tcp\_fin\_timeout = 20  
net.ipv4.tcp\_keepalive\_time = 30  
net.ipv4.tcp\_syncookies = 1  
net.ipv4.tcp\_tw\_reuse = 1  
net.ipv4.tcp\_tw\_recycle = 1  
net.ipv4.ip\_local\_port\_range = 8800 65000  
net.ipv4.tcp\_max\_syn\_backlog = 8192  
net.ipv4.tcp\_max\_tw\_buckets = 5000

关于优化TCP连接推荐一篇文章：http://www.cnblogs.com/sunxucool/p/3449068.html