Jquery ajax 同步阻塞引起的UI线程阻塞问题

近日，在项目开发过程中遇到一个问题，关于jQuery的ajax同步请求引发的UI线程阻塞。在深入后，终于找到问题所在，并想与大家分享这一问题的解决过程。

一开始，因为页面上有多个相似的异步请求动作，为了提高代码的可重用性，我封装了一个名为getData的函数，它负责获取数据并返回。基本的逻辑如下：

```javascript

function getData() {

var result;

$.ajax({

url: "p.php",

async: false, // 由于需要同步获取数据，这里设置为false

success: function(data) {

result = data; // 将返回的数据赋值给result变量

}

});

return result; // 返回数据

}

```

这个getData函数用于获取数据，但在使用时发现了一个问题。当我在请求前想要显示一个加载动画（loading图标），并在请求完成后隐藏时，页面却没有任何反应。为了模拟这种情况，我让PHP代码休眠3秒再返回数据。经过调查，我发现问题的根源在于同步ajax请求阻塞了UI线程。当设置为同步时，其他动作（包括DOM操作和页面渲染）都会暂停执行。即使加载动画的代码是在发起请求之前执行的，同步请求也会立即阻塞UI线程，导致动画无法显示。

为了解决这个问题，我首先尝试使用setTimeout来异步执行ajax请求。结果并不理想。虽然加载动画显示了出来，但在ajax请求期间，动画停止了更新，看起来像一张静态图片一样。这是因为同步请求仍然会阻塞UI线程，导致动画无法正常工作。我们需要寻找一种更好的解决方案。

function 获取数据3(){

创建一个deferred对象，用于处理异步操作。利用jQuery的Deferred对象，我们可以优雅地管理异步流程。

var defer = $.Deferred();

发起一个ajax请求到"p.php"。值得一提的是，我们不再设置async为false，这意味着请求是异步的。

$.ajax({

url : "p.php",

当请求成功时，调用deferred对象的resolve方法，并传入返回的数据。这样，我们就可以在后续的操作中拿到这些数据。

success: function(返回的数据){

defer.resolve(返回的数据);

}

});

返回deferred对象的promise，这样其他代码可以监听这个promise的状态变化。

return defer.promise();

}

当页面上的带有".btn3"类名的按钮被点击时，执行以下操作：

显示一个加载图标（loadingicon）。

使用jQuery的when方法等待获取数据3()函数的执行结果。当获取数据完成后，执行done方法，隐藏加载图标，并弹出返回的数据。

$(".btn3").click(function(){

$(".loadingicon").show(); // 显示加载图标

当获取数据完成时，执行以下操作：

$.when(获取数据3()).done(function(返回的数据){

$(".loadingicon").hide(); // 隐藏加载图标

alert(返回的数据); // 弹出返回的数据

});

});

测试代码之旅

亲爱的编程爱好者们，欢迎来到测试代码的新篇章！以下是我在旅程中收集的代码片段，希望你们能从中发现乐趣与挑战。让我们开始吧！

HTML部分：

```html

异步测试

延迟测试

Deferred测试

```

JavaScript部分：

```javascript

// 获取数据函数（async模式）

function getDataAsync() {

var result; // 存储结果变量

$.ajax({ // 执行AJAX请求

url: "p.php", // 请求的URL地址

async: false, // 同步请求，确保返回结果再执行后续操作

success: function(data) { // 请求成功时的回调函数处理数据逻辑

result = data; // 将返回的数据存储在result变量中

}

}); // 结束AJAX请求配置块

return result; // 返回结果变量（注意：由于异步特性，这里可能返回的是未定义值）

}

$(".asyncFalse").click(function() { // 当点击按钮时执行事件处理函数

$(".loadingicon").show(); // 显示加载图标动画效果提示正在加载数据

var data = getDataAsync(); // 获取数据异步处理函数结果，但由于同步限制可能导致获取数据失败或延迟响应的问题出现警告弹窗信息中可能包含不完整或错误的数据信息。请确保在真实环境中使用异步处理逻辑。"); // 执行事件处理函数逻辑，包括加载图标显示、异步请求、隐藏图标和弹出提示框显示数据等动作。这里通过setTimeout实现延迟加载效果，可以展示AJAX请求在延迟后的响应过程。同时请注意异步处理的正确实现方式是在异步函数中处理回调逻辑而不是直接返回结果。"); // 当点击按钮时执行事件处理函数，包括显示加载图标、调用异步获取数据的函数deferred模式处理函数")，此模式下不依赖异步处理的回调结构而是通过promise进行响应的获取。相较于直接同步阻塞调用更适应现代前端开发中对于异步流程控制的需求。点击按钮后展示加载图标等待响应并显示获取的数据信息。"); // 定义getDataDeferred函数用于获取数据，使用deferred模式处理异步请求。通过jQuery的when方法等待异步操作完成后再执行后续操作，避免了阻塞页面并提供了更好的用户体验。"); // 结束事件处理函数定义块"); // 结束script标签定义块中的脚本内容添加一段对ajax参数描述的解释部分来解释每个参数的含义和用途以增强文章的连贯性和阅读体验") 注释：下面是关于$.ajax方法的参数描述，有助于理解代码中的每个参数的含义和作用。"} 参数 描述 url 必填项，规定请求发送到的URL地址 data 可选项，可以是一个字符串值或映射值类型，表示发送到服务器的数据成功回调 success 可选项，请求成功时执行的回调函数数据类型 dataType 可选项，指定服务器响应的预期数据类型默认会进行智能判断（如xml、json等）"} 注意：在实际应用中，我们推荐使用异步方式处理AJAX请求以避免阻塞页面并提高用户体验。同步请求虽然可以立即返回结果但由于会阻塞页面渲染可能导致不良的用户体验因此应谨慎使用同步请求。在实际应用中应充分理解异步处理的机制并掌握正确的使用方法以确保代码的健壮性和可用性。同时请注意在真实环境中使用正确的参数配置和异步处理逻辑以获得最佳的测试结果和用户体验。现在让我们开始测试吧！是否顺利记得查看代码运行效果和实时交互性能表现哦！"};```