JS中如何处理多个ajax并发请求?
时间:2022-05-06
本文章向大家介绍JS中如何处理多个ajax并发请求?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
通常 为了减少页面加载时间,先把核心内容显示处理,页面加载完成后再发送ajax请求获取其他数据
这时就可能产生多个ajax请求,为了用户体验,最好是发送并行请求,这就产生了并发问题,应该如何处理?
(1)并行改串行
如果业务逻辑和用户体验允许的情况下,可以改为串行,处理起来最简单
function async1(){
//do sth...
async2();
}
function async2(){
//do sth...
}
async1();
(2)回调计数
function async1(){
//do sth...
callback();
}
function async2(){
//do sth...
callback();
}
function callback(){
cnt++;
if(2==cnt) console.log('都已执行完毕');
}
(3)循环非阻塞
function async1(){
//do sth...
cnt++;
}
function async2(){
//do sth...
cnt++;
}
var interval = setInterval(function(){
if(2===cnt){
console.log('已执行完成');
clearInterval(interval)
}
};
这个方法采用了定时间隔触发器,占用CPU比较多,建议酌情使用
(4)jquery
使用jquery的延时处理方法,每个ajax请求完成后,把对应的Deferred置为完成状态,然后用jquery判断全部完成后再进行后续处理
var d1 = $.Deferred();
var d2 = $.Deferred();
function async1(){
d1.resolve( "Fish" );
}
function async2(){
d2.resolve( "Pizza" );
}
$.when( d1, d2 ).done(function ( v1, v2 ) {
console.log( v1 + v2 + '已完成');
});
- JavaScript 背包问题详解
- 【干货】用于机器学习的线性代数速查表
- 使用机器学习预测天气(第一部分)
- linux 常用指令
- LCS 算法:Javascript 最长公共子序列
- 短网址(short URL)系统的原理及其实现
- 设计和实现一款轻量级的爬虫框架
- JavaScript实现模糊推荐的input框(类似搜索框)
- hadoop streaming编程小demo(python版)
- 一个scrapy框架的爬虫(爬取京东图书)
- mongodb生产环境(副本集模式)集群搭建配置
- ELK日志收集分析系统配置
- 【学术】如何在15分钟内建立一个深度学习模型?
- Elasticsearch(GEO)空间检索查询
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 通过 PHP 代码发送 HTTP 响应与文件下载
- 玩转 PhpStorm 系列(八):Vim 篇
- Android-Jetpack笔记-Paging结合数据库
- 分享 OWIN 静态文件处理中间件
- Android-Jetpack笔记-Paging结合网络数据
- 在 VS 2015 中使用 Gulp 编译 TypeScript
- Android-Jetpack笔记-WorkManager
- Android | Tangram动态页面之路(一)需求背景
- 吐槽 Micorsoft.Owin 的设计
- Android | Tangram动态页面之路(二)介绍
- 使用 ng-repeat-start 进行自定义显示
- AngularJS 多视图应用中的登录认证
- Android | Tangram动态页面之路(三)使用
- Android | Tangram动态页面之路(四)vlayout原理
- 基于QuestaSIM的SystemVerilog DPI使用流程(step by step)