一个基于jQuery延迟对象Deferred的异步任务处理方法

来源：互联网发布：flashcs4软件下载编辑：程序博客网时间：2024/04/27 07:26

在网站应用程序中，使用同步方法执行一些长时间的任务时可能阻塞浏览器的UI进程（例如笔者的Chrome54.0.2840.71 m (64-bit)）。此时，需要使用异步处理技术，调用长时间的任务后马上返回，以便继续浏览器的UI进程。特别需要注意的是，异步执行任务返回后，必须保证操作操作者不能做有损该任务的其它操作（例如重复点某些按钮等）。

jQuery的延迟对象Deferred提供了一个较好的异步处理模型，见如下代码：

<!DOCTYPE html><head><script type="text/javascript" src="jquery-1.12.4.min.js"></script><script type="text/javascript">$(document).ready(function(){$("#btnWait").click(function(){CallAsync();});});function Task(count)  // 长时间的任务{for(var k = 1; k <= count; k++){var x = Math.sqrt(2017) * Math.sqrt(2016);}}function CallAsync(){var div = "<div id='waitPanel' style='position: fixed; left: 0px;  top: 0px; width: 100%; height: 100%; z-index: 9999; background: silver; opacity: 0.05'></div>";$(document.body).append(div);  // 以div块隔离网页与操作者$(document.body).css("cursor", "wait");  // 显示一个wait光标var observer = $.Deferred(function(defObj)  // 获取一个延迟对象{setTimeout(function(){Task(999999999);defObj.resolve();  // 任务结束后发送一个done事件通知}, 100);  // 100毫秒后执行长时间的任务});observer.done(function()  // 给延迟对象订阅一个done事件{$("#waitPanel").remove();$(document.body).css("cursor", ""); alert("async task done.");});}</script></head><body> <input id="btnWait" type="button" value="WaitCursor" /></body></html>

上述代码中，点击按钮将异步执行Task()方法（该过程需要几秒钟），此时光标将显示为wait样式，并以一个div块隔离网页与操作者，使得操作者不能点击网页上的任何元素（例如按钮等），达到了异步执行、同步效果的目的。

代码中的jQuery版本只需要1.5.0及以后版本即可。

1 0