很多时候我们在页面完成一些动作后希望再执行一些其它小动作,如完成某段动画后弹出提示信息,又或者在后台请求返回成功后弹出提示信息,关闭提示信息后再刷新当前页面,等等。
示例代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery callback 回调函数</title>
<script type="text/javascript" src="js/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css">
<script type="text/javascript">
$(document).ready(function () {
$("#btn_no_callback").click(function () {
$.messager.alert("没有回调函数效果,一闪而过!");
window.location.reload();
})
$("#btn_callback").click(function () {
$.messager.alert("window","有回调函数效果","info",function () {
window.location.reload();
})
})
})
function load() {
alert("Hello!页面刷新了!");
}
</script>
</head>
<body onload="load();">
<input id="btn_no_callback" type="button" value="没有回调"/>
<input id="btn_callback" type="button" value="有回调"/>
</body>
</html>
通过上述示例,我们可以直观的感受到,由于javascript代码执行是逐行进行的,所以未采用回调函数的效果是当弹出框还未确认时就由于执行了页面重载导致弹出框一闪而过的消失了。