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

最新推荐文章于 2022-12-07 18:01:22 发布

长沙三毛

最新推荐文章于 2022-12-07 18:01:22 发布

阅读量2.2k

点赞数 2

分类专栏： jQuery与Javascript

本文链接：https://blog.csdn.net/hulihui/article/details/53725307

版权

jQuery与Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在网站应用程序中，使用同步方法执行一些长时间的任务时可能阻塞浏览器的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及以后版本即可。