js回调函数传参
来源:互联网 发布:炒股训练软件 编辑:程序博客网 时间:2024/06/05 09:09
最近需要自己写一个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">
哪里写的不明白、不正确,希望可以指正
- js回调函数传参
- js 点击事件回调函数传参
- js回调函数
- js回调函数
- JS回调函数
- js回调函数
- js回调函数
- js回调函数
- js回调函数
- js-回调函数
- JS回调函数
- js回调函数
- js 回调函数
- js回调函数
- JS回调函数
- js回调函数
- js回调函数
- js回调函数
- QWT开发环境搭建
- 获取客户端真实IP地址
- 双重检查锁定及单例模式
- 关于iOS开发真机,模拟器的一些宏定义
- javascript中的时间大小比较
- js回调函数传参
- 使用ts_calibrate校准触摸屏
- linux下非root权限的mysql安装
- Linux下SQL Developer 4.0 安装
- Notifications(API Guides)//未完
- select into 和 insert into select的区别
- 职场新人该怎么度过浮躁期
- 未來의 成의 時運 (韓長庚 易學原理總論)
- 2014年一季度课程安排