js回调函数传参

最近需要自己写一个confirm的对话框，需要和用户交互。即：弹出对话框，等待用户点击确认或者返回之后，取到点击结果才继续做处理。

举例：var a = window.confirm("确认删除？"); 难题就在这里，confirm执行后所有的js都堵塞了，就在这里等待a的结果。

本来绞尽脑汁定时器，绑定事件，偶然看到回调函数，即 function a执行完，在执行function b。有解了。

首先感谢：http://www.cnblogs.com/yhql/archive/2011/08/08/2131420.html

这位大神说的很明白。然后我这里为了满足需求，说明一下自己传参。

 

 

正题：

先问一个问题：

<script>  
function a(){
	//执行一系列操作
}
function b(){
	alert("b执行了");
}

function test(){
	a();
	b();
}
</script>

试问，执行test()方法，一定会a执行完，才执行b吗？

答案是否定的，a假如有复杂的运算 比如后台有ajax交互，a或许还没有执行完，b就执行完了。假如你在b中又要等a的结果。那么b拿到的值会不会是null 、"" 呢？回调函数就可以解决这个问题，a执行完了以后，b才继续执行。

什么是回掉函数？

a执行完了，回来执行b。就完成了a调用b。其实b就是a的一个参数。

依然借用上面大神的例子：

        你给女朋友说，你到家给我一个信息。女朋友到家了，果然给你了一条信息，老公，我到家了，别担心。

        女朋友回家就是函数a，发信息就是函数b。

听不明白的话，就看例子啦

js代码

<script type="text/javascript">
function a(callback){
	alert("回家路上。。。。。。。。end");
	callback();//回家以后，发信息
}
function b(){
	alert("我到家了");
}

function test(){
	a(b);
}

</script>

 

测试按钮

<input type="button" value="记得给我回信息" onclick="test()">

 

分析一下：首先执行function a，回家。回家执行完了，执行function b，到家了。最好可以用Firefox加断点跟踪一下，看下执行顺序更清晰。

 

传参数：

上面的alert或许并不是想要的，比如confirm对话框，想要的true或者false。在函数a中判断b的结果。继续看代码

js代码：

<script type="text/javascript">
function a(callback){
	alert("回家路上。。。。。。。。end");
	//callback();//回家以后，发信息
	callback("到家结果");
}
function test(){
	//a(b);//执行a的时候，用一个匿名function接收  function a的回调函数的参数
	a(function (result){
		alert(result);
	});
}

</script>

 

 

这里不同的是原来的b换成了function，a中的callback传了一个是否到家的参数。

 

对话框demo:

下面给一个对话框的模拟，或许更明白。界面很丑陋，这里主要是callback的demo，关键的是，可以自己控制confir的样式，随意修改。加上弹出层插件的结合，才是自己想要的。

js代码

<script type="text/javascript">

function showButton(){//让确认，取消显示出来
	$("input[name='yesButton']").css('display','block');
	$("input[name='noButton']").css('display','block');
}
function hidenButton(){//确认按钮隐藏起来，并取消绑定的click事件
	$("input[name='yesButton']").css('display','none');
	$("input[name='noButton']").css('display','none');
	
	$("input[name='yesButton']").unbind();
	$("input[name='noButton']").unbind();
}

function a(callback){
	showButton();
	$("input[name='yesButton']").bind("click",function (){
		 callback(true);//点击以后，把结果传回去。没有点击就不执行callback
		 hidenButton();
	 });
	 $("input[name='noButton']").bind("click",function (){
		 callback(false);
		 hidenButton();
	 }); 
}
function test(){
	//a(b);
	a(function (result){
		//alert(result);
		if(result){
			alert(result+"点击了确定。执行删除等操作");
		}else{
			alert(result+"点击了取消。不做操作");
		}
		
	});
}

</script>

这里可以只看function a，和function test
分析一下：function a的参数是 函数callback，点击确认或者取消按钮以后，再执行callback(true)、callback(false)。
这里就是重点，必须点击执行完了，继续执行传出结果，否则就不执行。相当于在等待点击的结果。

测试按钮

<input type="button" value="确认对话框" onclick="test()">

<input style="display: none" type="button" value="yes" name="yesButton" id="yesButton">
<input style="display: none" type="button" value="no" name="noButton" id="noButton">

 

哪里写的不明白、不正确，希望可以指正