AJAX 同步请求导致的UI阻塞问题

遇到的一个问题，大概是这样的。。。

前端页面上有一个列表，遍历列表按照并发度执行ajax操作，需要等上一个并发度执行返回结果后才能决定是否进行下一个并发度的执行。

1、一开始的想法是，写一个ajax执行函数，传入每次执行的并发度，用for循环遍历列表，执行这个函数。比如有8个IP，然后并发度2，就for循环，执行4次的这个函数。但是，这样是不行的，因为ajax默认情况下是异步多线程的的，也就是说，我在执行第一个并发度的IP时候，它并不会等待后端的接口返回执行的结果再往下，而是会再开一个线程，执行下一个并发度的IP，这样就违背了我需要等待上一个并发度执行结果才能再继续往下执行的要求。

2、然后，第二个想法是，既然ajax是异步的，那我用async : false把它改成同步的不就好了，然后，这就导致了标题所示的问题，虽然这样就可以按照顺序来执行了，等上一个ajax请求返回结果后才执行下一个请求，但是，因为单线程的原因，导致ajax返回结果后前端UI的变化无法马上执行，而是直接执行下一个ajax了，也就是UI阻塞，知道ajax都执行完了才执行UI的变化，这样对用户很不友好，得等全部都执行完了才能看到变化，像个憨批。
查了下，如果想同步又执行UI的话，需要为AJAX请求写回调函数，就是接收到后端返回的结果后会执行的操作。因为一些原因这种方法在我的具体场景了好像也不行，就不研究了。
总是，ajax最好还是别设成同步的了，单线程不知道会出现什么问题，还是尽量在代码逻辑上支持异步的情况。

3、最好的解决方法是将执行的ajax函数改成递归的，也就是套娃hhh，全局设置一个flags标识，只有标识为True的时候才继续执行下去，而标识为False的时候则停止执行，在遇到终止条件是就把标识设为Flase（具体情况具体分析），并且需要写在ajax的sucess代码段，这样等待上一个请求成功返回执行结果才会进行判断是否往下执行下一个请求，这样就避免了第一种情况。

AJAX 同步请求导致的UI阻塞问题相关推荐

函数内的ajax同步请求导致遮罩层失效、或者导致loading正在加载提示失效问题
功能需求编写点击按钮,弹出loading遮罩层提示正在加载中-,同时查询后台信息,拼接数据后渲染到列表时,为了保障渲染时,列表中的数据已经拼接完成.所以在for循环中使用同步ajax进行请求,在su ...
ajax同步请求导致beforeSend在调用前未执行
async属性的作用是设置ajax同步或异步请求,async:false 为同步请求,async:true 为异步请求,ajax默认是异步请求,当使用同步请求时在服务器返回值之前不再加载后面的代码,只 ...
js样式会影响ajax,js ajax同步请求造成浏览器假死的问题
今天写了一个简单的loading效果,希望在点击加载按钮后会出现loading字样,然后执行ajax同步请求,加载完之后loading样式消失,本来是很简单的需求,结果遇上了很尴尬的问题~ 问题:当我 ...
ajax同步请求加上loading遮罩遇到的坑
ajax同步请求加上loading遮罩遇到的坑问题出在ajax被我设置成同步了,浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉.当我们执行异步ajax的时候没有 ...
使用Ajax同步请求增加页面等待提示
使用Ajax同步请求增加页面等待提示最近在做项目时,有一个需求是批量打印好多个合同,使用AJAX向后台传送数据,等待后台执行后,需要把生成之后的文件地址传送过来. 后台的处理时间比较长,根据合同的多 ...
Ajax——同步请求与异步请求
Ajax--同步请求与异步请求浏览器和服务器之间数据传输方式同步方式异步方式两种方式有什么不同? 同步请求,服务器响应时,页面整体刷新异步请求,服务器响应时,页面局部刷新异步请求有什么优点 ...
ajax同步请求和异步请求
ajax同步请求和异步请求前序什么是同步请求? 什么是异步请求? 比较同步和异步请求前序最近好长时间没写博客了,主要由于前一段时间出差,没啥心思写,今天开始重新继续.进入主题,ajax的同步请 ...
大量Ajax同步请求，出现浏览器页面假死，而Loading图标卡死的情况
最近做了一个功能,需要大量删除数据,但是只能从前台一条一条调用API删除(客户的奇怪要求). 同时在删除的过程中,我写了一个Loading的图标,用于展示删除的progress(就是删除了百分之多少的 ...
ajax同步请求超时时间问题
最近做到一个功能,从别的连接跳转登录到我们系统后台,登录后会查询一些数据.一开始登录用的异步调用,领导看日志发现还没登录就调了好几个查询接口,要改.我想简单点就改成同步不就行了,然后上同步,恩,好多了 ...

AJAX 同步请求导致的UI阻塞问题

AJAX 同步请求导致的UI阻塞问题相关推荐

最新文章

热门文章