JQUERY回调函数

最新推荐文章于 2024-06-07 15:45:21 发布

思维小刀

最新推荐文章于 2024-06-07 15:45:21 发布

阅读量9.5k

点赞数 3

分类专栏： jQuery

本文链接：https://blog.csdn.net/fujian9544/article/details/100745684

版权

jQuery 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

一些需求

很多时候我们在页面完成一些动作后希望再执行一些其它小动作，如

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>

总结总述

函数作为参数进行输入到函数中，在主函数中进行顺序执行，就是回调函数。

思维小刀

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JQUERY回调函数

一些需求很多时候我们在页面完成一些动作后希望再执行一些其它小动作，如1.完成某段动画后弹出提示信息；2.在后台请求返回成功后弹出提示信息，关闭提示信息后再刷新当前页面；为什么会需要回调函数把一个函数作为参数传入到我们的主函数中，让这个函数按照我们的想法顺序进行执行。我们希望能够在弹出提示信息之后，在我们进行点击确定之后，再执行一个函数内容，这个时候就会用到回调。因为在程...
复制链接

扫一扫

专栏目录