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