一些需求
很多时候我们在页面完成一些动作后希望再执行一些其它小动作,如
1.完成某段动画后弹出提示信息;
2.在后台请求返回成功后弹出提示信息,关闭提示信息后再刷新当前页面;
为什么会需要回调函数
把一个函数作为参数传入到我们的主函数中,让这个函数按照我们的想法顺序进行执行。
我们希望能够在弹出提示信息之后,在我们进行点击确定之后,再执行一个函数内容,这个时候就会用到回调。
因为在程序是非堵塞的,弹出消息之后,在我们还没在弹出框里面进行点击确认或者选择的时候,程序已经执行下面的语句了;
这样我们就没有选择权了,不符合用户习惯,所以我们采用回调函数的方式;
采用了回调函数之后,我们就把callback与主函数体合二为一了,就会是顺序执行了,就可以进行选择和点击确认了。
分开写会导致不能对弹出框进行确认
回调函数作为参数加入到主函数中,可以使得回调在主函数中进行顺序执行,弹出框也就可以正常了。
例子1
如果不用回调,在alert弹出框之后,我们还没有点击确认的时候,就刷新了,不合常规。
例子2
如果不用回调,ajax与弹出框函数分开写,结果就会是在弹出框之后,我们还没进行点击选择,就已经发送ajax了,然后再弹出弹出框,不符合我们的需求,所以不能这样。
function ops(act,uid) {
callback = {
"ok":function(){
$.ajax({
url:common_ops.buildWebUrl("/account/ops"),
type:'POST',
data:{
act:act,
uid:uid,
},
dataType:'json',
success:function(res){
allback = null;
if(res.code == 200) {
callback =function () {
window.location.reload();
}
}
common_ops.alert(res.msg,callback);
}
});
},
"cancel":function(){
}
};
//记住callback是一个回调函数
//回调函数是作为一个参数在函数中
//然后在函数内部让他运行
common_ops.confirm((act == "remove")?"确定删除吗?":"确定恢复吗?",callback);
//四个参数
//第一个是信息
//第二个是按钮
//第三个是成功的方法
//第四个是失败的方法
confirm:function( msg,callback ){
callback = ( callback != undefined )?callback: { 'ok':null, 'cancel':null };
layer.confirm( msg , {
btn: ['确定','取消']
}, function( index ){
if( typeof callback.ok == "function" ){
callback.ok();
layer.close( index );
}
}, function( index ){
if( typeof callback.cancel == "function" ){
callback.cancel();
layer.close( index );
}
});
},
例子3代码示例
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<button>按钮</button>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 不用回调的 -->
<!-- <script type="text/javascript">
var object = {
init:function(){
this.eventbind();
},
eventbind:function(){
$("button").click(function(){
alert("111");
})
// 不用回调这边都看不到弹出框,更不要说点击确定了
window.location.reload();
}
}
$(document).ready(function(){
object.init();
})
</script> -->
<!-- 用回调的 -->
<script type="text/javascript">
var back = "回调函数"
function callback(){
alert(back);
window.location.reload();
}
var object = {
main:"主函数",
tanchu:function(msg,callback){
alert(object.main);
if (typeof callback == "function"){
callback();
}
},
}
$(document).ready(function(){
$("button").click(function(){
object.tanchu("信息",callback);
})
})
</script>
代码4代码优化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<button id="noback">按钮</button>
<hr>
<button id="hasbac">按钮</button>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 不用回调的 -->
<!-- <script type="text/javascript">
var obje = {
init:function(){
this.eventbind();
},
eventbind:function(){
$("#noback").click(function(){
alert("1");
})
// 还没出现111呢 已经弹出1了
alert("2 没有弹出1 应该先弹出1的");
}
}
$(document).ready(function(){
obje.init();
})
</script> -->
<!-- 用回调的 -->
<script type="text/javascript">
var hasbac = {
main:"主函数",
back:"回调函数",
init:function(){
this.eventbind();
},
eventbind:function(){
// 把callback让入了tanchu方法中,就会顺序执行了
// 如果直接写会导致直接弹出
$("#hasbac").click(function(){
hasbac.tanchu("点击",hasbac.callback);
})
// alert(hasbac.back);
// window.location.reload();
},
// 以下两个就是回调函数的写法
tanchu:function(msg,func){
alert(msg);
alert(hasbac.main);
if (typeof hasbac.callback == "function"){
hasbac.callback();
}
},
callback:function(){
alert(hasbac.back);
window.location.reload();
},
}
$(document).ready(function(){
hasbac.init();
})
</script>
总结总述
函数作为参数进行输入到函数中,在主函数中进行顺序执行,就是回调函数。