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 相关文章推荐
JavaScript 字符编码规则
May 04 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
javascript实现简易计算器
Feb 01 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 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函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
PHP微信API接口类
2016/08/22 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
js常用代码段收集
2011/10/28 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
node使用request请求的方法
2019/12/20 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
学python安装的软件总结
2019/10/12 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
实用求职信范文分享
2013/12/25 职场文书
劳资协议书范本
2014/04/23 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
环保证明
2015/06/23 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android