ajax 的 async 的同步和 异步

本文通过一个具体实例详细解释了异步(async)与同步操作的区别,特别是在$.ajax调用中的表现形式,展示了设置async为true与false时的不同行为。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

async 英语释义为 “异步,非同步”。在项目中使用时总是忽略了它的存在。

当 async 是设置为 “true(默认状态)”,即表示异步进行,在 $.ajax运行时,也会同时运行$.ajax ->url 中的东西(想当于有两个线程同时进行)。

当 async 是设置为 “false”,时表示同步(单线)进行,在$.ajax运行时,程序必须先进入到后台程序完成成后才能进行$.ajax后面的方法

以下为例: 

function openLogin(){

$.ajax({
            cache: true,
            type: "POST",
            url:"oneCard",
            dataType: "json",
            async: false,
            error: function(request) {
                alert("Connection error");
            },
            success: function(data) {
        alert("数据成功");
            }
        });
        alert("同步进行");
}

后台5S睡眠

Thread.sleep(5000);


async: 设置为 true 时 先弹框了 “同步进行”,5S后再弹框 “数据成功”,它俩实际是同步进行。只是等待了5S,所以“数据成功”在后弹框。

async:设置为 false 时 我在后台设置了等待5s响应。 此时前台5S 后弹框了“数据成功” 再弹框 “同步进行”,而非第一种情况.


我觉得这个例子也足够说明了。



<think>我们正在讨论Ajax同步异步请求。根据引用内容,我们可以总结如下:1.**定义区别**:-**异步请求(async:true)**:默认模式。发送请求后,JavaScript代码会继续执行,不等待响应。当响应返回时,通过回调函数(如success)处理结果。-**同步请求(async:false)**:发送请求后,JavaScript代码会暂停执行,直到收到响应后才继续执行后续代码。2.**代码执行流程**:-异步请求:不会阻塞UI脚本执行,请求发送后立即执行后续代码,响应处理在回调函数中进行。-同步请求:会阻塞所有后续代码执行,直到请求完成,这可能导致浏览器假死(UI锁定)。3.**使用场景**:-**异步请求**:适用于大多数场景,特别是需要保持用户界面响应的操作(如:表单提交、数据加载、实时更新等)。因为不会阻塞用户操作,用户体验更好。-**同步请求**:适用于需要确保请求顺序执行或依赖请求结果才能继续执行的场景(如:需要根据第一个请求的结果发送第二个请求,且无法通过回调嵌套实现时)。但应谨慎使用,因为会导致用户体验下降(浏览器卡顿)。4.**代码示例**:-异步请求示例(jQuery):```javascript$.ajax({type:"POST",url:"some_url",data:{...},async:true,//可省略,默认truesuccess:function(response){//处理响应}});//后续代码立即执行```-同步请求示例(jQuery):```javascript$.ajax({type:"POST",url:"some_url",data:{...},async:false,//同步请求success:function(response){//处理响应}});//后续代码等待请求结束后执行```5.**注意事项**:-同步请求在最新的Web标准中已被认为是不推荐的做法(deprecated),因为会导致糟糕的用户体验。在jQuery3.0+中,同步请求在主线程已被移除,但仍可在Worker线程中使用。-异步请求通常通过回调函数、Promise或async/await来处理异步流程,以避免回调地狱(CallbackHell)并提高代码可读性。综上所述,优先使用异步请求,除非有特殊需求且了解同步请求的负面影响。§§相关问题§§1.为什么同步请求会导致浏览器假死?2.如何避免使用同步请求?有哪些替代方案?3.在异步请求中如何处理多个依赖的请求(如请求B需要请求A的结果)?4.除了jQuery,现代JavaScript(如FetchAPI)如何处理同步异步请求?5.同步请求在哪些特定场景下仍然有必要使用?</think>### Ajax 同步异步的区别及使用场景 #### 一、核心区别 1. **执行机制** - **同步请求**(`async: false`) 发送请求后浏览器会**阻塞后续代码执行**,直到收到服务器响应才继续执行后续代码。 示例:`console.log('A'); ajaxSyncRequest(); console.log('B')` → 输出顺序:A → 请求完成 → B [^2][^4] - **异步请求**(`async: true`,默认) 发送请求后**立即执行后续代码**,服务器响应通过回调函数处理。 示例:`console.log('A'); ajaxAsyncRequest(); console.log('B')` → 输出顺序:A → B → 请求完成 [^1][^3] 2. **浏览器行为** - 同步请求会**锁定浏览器UI**(按钮/滚动条失效),导致“假死”现象; - 异步请求保持UI可操作,用户体验更流畅 [^4][^5]。 3. **代码结构差异** ```javascript // 同步请求(阻塞执行) $.ajax({ url: "api/data", async: false, // 关键参数 success: function(data) { console.log("Received:", data); } }); console.log("继续执行"); // 在请求完成后执行 // 异步请求(非阻塞) $.ajax({ url: "api/data", success: function(data) { console.log("Received:", data); } }); console.log("立即执行"); // 不等待请求 ``` #### 二、使用场景 1. **同步请求适用场景** - 需要严格保证执行顺序的操作(如:支付确认需先验证余额再扣款) - 极少数需阻塞用户交互的敏感操作(但应尽量避免)[^1][^4] 2. **异步请求适用场景** - **90%+ 的常见需求**: - 表单提交后局部刷新页面 - 动态加载数据(如无限滚动) - 实时数据更新(股票行情/聊天消息) - 所有需要保持用户界面响应的场景 [^3][^5] #### 三、选择建议 1. **优先使用异步请求**:避免浏览器卡顿,提升用户体验 [^4][^5]。 2. **同步请求谨慎使用**:仅当业务逻辑强依赖即时响应结果时使用,且需控制请求时长 [^1]。 3. **替代方案**: - 用`Promise`/`async/await`管理异步依赖 - 嵌套回调处理顺序逻辑(如:先登录再获取数据) > ⚠️ **注意**:现代浏览器已弃用主线程同步请求,jQuery 3.0+ 中同步选项仅在Web Worker可用 [^4]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值