JS回调函数简单易懂的入门实例分析


Posted in Javascript onSeptember 29, 2019

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

初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数。什么是JS?(点击查看)

下面先看看标准的解释:

JS回调函数简单易懂的入门实例分析

<script language="javascript">
function SortNumber( obj, func )      // 定义通用排序函数
{
  // 参数验证,如果第一个参数不是数组或第二个参数不是函数则抛出异常
  if( !(obj instanceof Array) || !(func instanceof Function))
  {
   var e = new Error();       // 生成错误信息
   e.number = 100000;        // 定义错误号
   e.message = "参数无效";       // 错误描述
   throw e;            // 抛出异常
  }
  for( n in obj )            // 开始排序
  {
   for( m in obj )
   {
    if( func( obj[n], obj[m] ) )    // 使用回调函数排序,规则由用户设定
    {
     var tmp = obj[n];        // 创建临时变量
     obj[n] = obj[m];    // 交换数据
     obj[m] = tmp;
    }
   }
  }
  return obj;             // 返回排序后的数组
}

我们先来看看回调的英文定义:A callback is a function that is passed as an argument to another function and is executed after its parent function has completed

字面上的理解,回调函数就是传递一个参数化的函数,就是将这个函数作为一个参数传到另一个主函数里面,当那一个主函数执行完之后,再执行传进去的作为参数的函数。走这个过程的参数化的函数 就叫做回调函数。换个说法也就是被作为参数传递到另一个函数(主函数)的那个函数就叫做 回调函数

举一个别人举过的例子:约会结束后你送你女朋友回家,离别时,你肯定会说:“到家了给我发条信息,我很担心你。” 对不,然后你女朋友回家以后还真给你发了条信息。小伙子,你有戏了。其实这就是一个回调的过程。你留了个参数函数(要求女朋友给你发条信息)给你女朋友,然后你女朋友回家,回家的动作是主函数。她必须先回到家以后,主函数执行完了,再执行传进去的函数,然后你就收到一条信息了。

回调函数应用场景多用在使用 js 写组件时和耗时操作上面,尤其是组件的事件很多都需要回调函数的支持。

如果还是不明白,下面看一下代码:

<script type="text/javascript">
  function title(value){//这是回调函数!!!!
    alert(value);
  }
  function main(title, value){//这个主函数:在参数列表中,title作为一个参数传递进来,也就是上文说的 参数化函数;然后value这个值正是title()函数中所需要的。
    alert("我是主函数");
    title(value);//结果为:'我是回调函数'。——————然后在这行这个title(),它就是回调函数咯。
  }
  main(title,"我是回调函数");//title参数加上()后,就会变回一个函数,并会被执行一次。
  //PS:看清楚,调用的是main()函数,意味着先执行main(),这时已经执行了主函数,title()被main()在函数体中执行了一次,因此title()是回调函数。
</script>

回调函数易混淆点——传参:

一,将回调函数的参数作为与回调函数同等级的参数进行传递。

JS回调函数简单易懂的入门实例分析

二,回调函数的参数在调用回调函数内部创建。

JS回调函数简单易懂的入门实例分析

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

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

Javascript 相关文章推荐
javascript 变量作用域 代码分析
Jun 26 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 #Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 #Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 #Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 #Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 #Javascript
React-redux实现小案例(todolist)的过程
Sep 29 #Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 #Javascript
You might like
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
php常用数组函数实例小结
2016/12/29 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
python 实现绘制整齐的表格
2019/11/18 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
python温度转换华氏温度实现代码
2020/12/06 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
税务干部鉴定材料
2014/02/11 职场文书
生产厂长岗位职责
2014/02/21 职场文书
《王二小》教学反思
2014/02/27 职场文书
中秋节主持词
2014/04/02 职场文书
三万活动总结
2014/04/28 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
python如何查找列表中元素的位置
2022/05/30 Python