JS中的回调函数实例浅析


Posted in Javascript onMarch 21, 2018

本文实例讲述了JS中的回调函数。分享给大家供大家参考,具体如下:

在说回调函数之前,不妨先看一段代码,相信有点js基础的同学都能明白他的含义:

document.getElementById('demo').click=function(){
  alert(1);
};

这段代码其实就是一段事件回调,这样写看的其实相对模糊一些,我们不妨看下接下来的代码

document.getElementById('demo').addEventListener('click',function(){
    alert(1)
});

这两段代码的所做的事情其实相同,不同的只是写法的差异,我们看这个addEventListener('eventName',callback)addEventListener这个函数有两个参数,第一个为事件名称,第二个参数实际上就是回掉函数,按照书上来说回调函数的方式,函数中的参数既然可以是变量,那么他也可以是一个函数。可能说到这里大家对回掉函数还是一脸懵逼。我们再看接下来这个例子。

function demo(a,b,callback){
    let c=a+b;
    callback(c);
};
demo(1,2,function(c){
    alert(c);//3
})

这段代码定义了一个demo函数,这个函数有三个参数a,b,callback,我们在这个函数内部声明了一个局部变量c,然后执行我们的callback(回调函数),接下来执行demo这个函数

这个函数的三个参数如上,在回掉函数中弹出的为3。这就是一个简单的回调函数。而要想真正理解回调函数的意义,其实我觉得还是在于明白他的用途,只有明白他的用途了我们才可以真正的去理解他。

回调函数最多的应用场景就是异步操作,因为异步的操作我们不知道这个操作到底何时结束,那么我们后续执行的代码就无法按照应有的流程走下去。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
DOM 事件流详解
Jan 20 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 #Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 #Javascript
JS实现遍历不规则多维数组的方法
Mar 21 #Javascript
vue项目关闭eslint校验
Mar 21 #Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 #Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 #Javascript
JS代码实现电脑配置检测功能
Mar 21 #Javascript
You might like
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
解决python写的windows服务不能启动的问题
2014/04/15 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
Python 多维List创建的问题小结
2019/01/18 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
家长给小学生的评语
2014/01/30 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
银行招聘自荐信
2015/03/06 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python