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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
微信小程序生成二维码的示例代码
Mar 29 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
PHP has encountered an Access Violation
2007/01/15 PHP
简单采集了yahoo的一些数据
2007/02/14 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
使用javascript插入样式
2016/03/14 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
python设置检查点简单实现代码
2014/07/01 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
Python中return self的用法详解
2018/07/27 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书