使用Deffer解决页面假死与异步加载问题

"同步显示遮罩deffer" 在Web开发中，我们经常遇到用户界面(UI)在处理大量数据或执行耗时操作时出现“假死”现象。这是因为浏览器的JavaScript执行线程与页面渲染线程之间存在冲突。为了解决这个问题，我们可以使用`defer`策略，特别是配合Promise对象来优化异步操作，如在循环中执行多个Ajax请求。这种技术有助于避免阻塞用户界面，同时确保所有操作完成后才进行下一步，例如隐藏加载遮罩。 标题中提到的“同步显示遮罩deffer”是指在执行异步操作（如Ajax请求）时，先显示遮罩层（通常是一个加载图标），然后在所有异步操作完成后再关闭遮罩层。这可以提供更好的用户体验，让用户知道后台正在处理任务。 在描述中，提到的解决方案是利用JavaScript中的Promise和`$.Deferred()`对象。`$.Deferred()`是jQuery提供的一个用于创建Promise对象的工具，它可以让我们更灵活地处理异步操作。当我们在循环中执行多个Ajax请求时，可以在循环外部创建一个空数组，然后每次Ajax请求成功后，将数据推入该数组。当数组长度等于循环次数时，使用`defer.resolve()`方法来解决Promise，从而触发后续的操作，例如隐藏遮罩。 以下是一个示例代码： ```javascript function getData3() { var defer = $.Deferred(); $.ajax({ url: 'p.php', // async: false, // 不推荐使用同步请求，会导致页面阻塞 success: function(data) { defer.resolve(data); } }); return defer.promise(); } $('.btn3').click(function() { $('.loadingicon').show(); // 显示加载遮罩 $.when(getData3()).done(function(data) { $('.loadingicon').hide(); // 隐藏加载遮罩 alert(data); }); }); ``` 在这个例子中，`$.when(getData3())`创建了一个Promise，当`getData3()`返回的Promise被解决（即Ajax请求成功）时，`.done()`回调函数会被调用。这意味着在所有Ajax请求完成并且遮罩被显示之后，才会隐藏遮罩并显示数据。 值得注意的是，虽然在循环中使用`defer`和Promise可以解决页面假死问题，但也要注意避免滥用。如果Ajax请求过多，可能会导致内存占用增加。因此，合理地组织和优化异步操作至关重要。此外，现代JavaScript引入了`async/await`语法，可以进一步简化异步编程，使得代码更加清晰易读。不过，这个案例中仍然使用了基于Promise的传统jQuery方法。