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 For Beginners(转载)
Jan 05 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
js模糊查询实例分享
Dec 26 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 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使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
原生js 秒表实现代码
2012/07/24 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
浅析javascript的return语句
2015/12/15 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
Python制作简易注册登录系统
2016/12/15 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
如何在python中使用selenium的示例
2017/12/26 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
医生行业员工的辞职信
2019/06/24 职场文书