JS回调函数原理与用法详解【附PHP回调函数】


Posted in Javascript onJuly 20, 2019

本文实例讲述了JS回调函数原理与用法。分享给大家供大家参考,具体如下:

JS回调函数

何为回调函数,官方解释:当程序跑起来时,一般情况下,应用程序(application program)会时常通过API调用库里所预先备好的函数。但是有些库函数(library function)却要求应用先传给它一个函数,好在合适的时候调用,以完成目标任务。这个被传入的、后又被调用的函数就称为回调函数(callback function)。

通常将一个函数B传入另一个函数A,并且在需要的时候再调用函数A。

说白了,回调就是回溯,先定义好将要使用的函数体,然后在使用使再调用这个函数,我们通常把callback作为一个参数传入先定义的那个函数。下面我们先来看一段jquery代码:

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

上面jquery就是一个回调函数,首先它在执行完hide效果后,接着调用function回调函数。

我们再来看一段JS代码,看看回调函数是如何实现的:

function Buy(name,goods1,callback) {
  alert(name+' buy '+goods1);
  if(callback&&typeof(callback)==="function")
    callback();
}
Buy('xiaoming','apple',function(){
  alert("shopping finish");
});

一个很简单的代码,一开始不知道要买啥,等到买到东西,立即把之前定义好的函数调用出来,最好加上判断规则,因为一切前提是callback必须是一个函数,输出结果为:

xiaoming buy apple
shopping finish

闭包与回调

下面看一道闭包的题目,分别点击第一个和第四个节点,执行结果:

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener('click', function() {
    console.log('You clicked element #' + i);
  });
}

这里虽然主要考的是闭包,addEventListener是一个闭包,而匿名函数是一个回调函数,i是在闭包中的变量。在addEventListener的回调执行时,循环已经结束,此时的变量i被赋值为node.length,node.length为总节点数。所以结果就是

You clicked element # node.length

那要怎么改,将其返回值改成函数,既然i变量的值会被释放,那我们就引入i,让每次循环的值都保存在内存中,就可以了:

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
(function(i) {
  nodes[i].addEventListener('click', function () {
    console.log('You clicked element #' + i);
    })
  })(i);
}

PHP回调函数

下面略说一下php中回调函数如何实现(结果为1,2,3,4):

<?php
  $array=array(1,2,3,4);
  array_walk($array,function($value){
    echo $value;});
?>

php对每个传入的数组元素作回调处理,下面再看看php的闭包,使用use关键字继承作用域外的变量:

<?php
  function getcouter(){
    $i=0
    return function() use($i)(
      echo $i;
    )};
  }
  $counter=getcounter();
  echo $counter();
  echo $counter();
?>

返回结果为:

1,1
1

官方php使用方法

class hello {
function callback($a,$b) {
echo "$a,$b";
}
static function callback($c,$d){
echo "$c,$d";
}
}
//将类名作为参数
call_user_func(array('hello','callback'),"hello","world");
//输出 hello,world
//将对象作为参数
call_user_func(array(new hello(),'callback'),"hello","world");
//将静态方法作为参数
call_user_func(hello::callback,"hello","world");
//输出 hello,world

其实就原理来说,JS和php都是差不多的,都是先定义好函数,然后需要的时候就调用过来。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 #Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 #Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 #Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 #Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 #Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 #Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 #Javascript
You might like
php表单转换textarea换行符的方法
2010/09/10 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
JavaScript多线程的实现方法
2007/05/08 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
tensorflow更改变量的值实例
2018/07/30 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
np.dot()函数的用法详解
2020/01/17 Python
python2 对excel表格操作完整示例
2020/02/23 Python
详解python程序中的多任务
2020/09/16 Python
django使用channels实现通信的示例
2020/10/19 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
技术合作协议书范本
2014/04/18 职场文书
公司承诺书格式
2014/05/21 职场文书
最美护士演讲稿
2014/08/27 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
2015年行政执法工作总结
2015/05/23 职场文书