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 相关文章推荐
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
js实现列表按字母排序
Aug 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中删除变量时unset()和null的区别分析
2011/01/27 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
干部培训自我鉴定
2014/01/22 职场文书
毕业证委托书范文
2014/09/26 职场文书
介绍信怎么写
2015/01/30 职场文书
红色经典观后感
2015/06/18 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
python非标准时间的转换
2021/07/25 Python