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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
javascript内置对象操作详解
Feb 04 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
python实现将内容分行输出
2015/11/05 Python
深入理解Python中的内置常量
2017/05/20 Python
python代码实现ID3决策树算法
2017/12/20 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
写出二分查找算法的两种实现
2013/05/13 面试题
护理学专业推荐信
2013/12/03 职场文书
《长城》教学反思
2014/02/14 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
教研处工作方案
2014/05/26 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
公务员考察材料
2014/12/23 职场文书
三年级学生评语大全
2014/12/26 职场文书
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python
Pillow图像处理库安装及使用
2022/04/12 Python
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL