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判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
在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 随机生成10位字符代码
2009/03/26 PHP
php 判断数组是几维数组
2013/03/20 PHP
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
理解Javascript闭包
2013/11/01 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
python算法表示概念扫盲教程
2017/04/13 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Python实现时间序列可视化的方法
2019/08/06 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
django框架forms组件用法实例详解
2019/12/10 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
Python中如何定义一个函数
2016/09/06 面试题
如何掌握自荐信格式呢
2013/11/19 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
写给女生的道歉信
2014/01/08 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
寄语学生的话
2014/04/10 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
2015年商场工作总结
2015/04/27 职场文书
在校学生证明格式
2015/06/24 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP