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 相关文章推荐
为指定元素增加样式的js代码
Dec 09 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 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二分法在IP地址查询中的应用
2008/08/12 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
学习python (2)
2006/10/31 Python
django初始化数据库的实例
2018/05/27 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
英语老师推荐信
2014/02/26 职场文书
作文评语集锦大全
2014/04/23 职场文书
金融专业求职信
2014/08/05 职场文书
建设工程授权委托书
2014/09/22 职场文书
营销计划书范文
2015/01/17 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS