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 相关文章推荐
JS获取URL中的参数数据
Dec 05 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
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 Google的translate API代码
2008/12/10 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
python发布模块的步骤分享
2014/02/21 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
Python中GIL的使用详解
2018/10/03 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
Python装饰器结合递归原理解析
2020/07/02 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
银行求职推荐信范文
2013/11/30 职场文书
八项规定整改方案
2014/10/01 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
老乡聚会通知
2015/04/23 职场文书
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers