JS中的回调函数实例浅析
本文实例讲述了JS中的回调函数。分享给大家供大家参考,具体如下:
在说回调函数之前,不妨先看一段代码,相信有点js基础的同学都能明白他的含义:
|
1
2
3
|
document.getElementById('demo').click=function(){ alert(1);}; |
这段代码其实就是一段事件回调,这样写看的其实相对模糊一些,我们不妨看下接下来的代码
|
1
2
3
|
document.getElementById('demo').addEventListener('click',function(){ alert(1)}); |
这两段代码的所做的事情其实相同,不同的只是写法的差异,我们看这个addEventListener('eventName',callback),addEventListener这个函数有两个参数,第一个为事件名称,第二个参数实际上就是回掉函数,按照书上来说回调函数的方式,函数中的参数既然可以是变量,那么他也可以是一个函数。可能说到这里大家对回掉函数还是一脸懵逼。我们再看接下来这个例子。
|
1
2
3
4
5
6
7
|
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。这就是一个简单的回调函数。而要想真正理解回调函数的意义,其实我觉得还是在于明白他的用途,只有明白他的用途了我们才可以真正的去理解他。
回调函数最多的应用场景就是异步操作,因为异步的操作我们不知道这个操作到底何时结束,那么我们后续执行的代码就无法按照应有的流程走下去。
JS中的回调函数实例浅析的更多相关文章
- js中的回调函数的理解和使用方法
js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...
- js中的回调函数的理解
一,常见的但是不是特别注意的回调方法. 1.1,ajax $.ajax({ url:"test.json", type: "GET", data: {usern ...
- 关于js中的回调函数callback
来源于:http://www.jianshu.com/p/6bc353e5f7a3 前言 其实我一直很困惑关于js 中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制 ...
- 关于 js 中的回调函数 callback
本文写于1年前 曾经的学习文章如今拿出来分享 前言 其实我一直很困惑关于js中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制一下前人代码,功能实现了也就不再去追其原 ...
- 关于js中的回调函数callback,通俗易懂
前言 其实我一直很困惑关于js 中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制一下前人代码,功能实现了也就不再去追其原由,这么着,这个callback的概念就越来 ...
- js中的回调函数 和promise解决异步操作中的回调地狱问题。
回调函数 : 函数作为参数传递到另外一个函数中.简单数据类型和引入数据类型中的数组和对象作为参数传递大家肯定都不陌生,其实引用数据类型中的函数也是可以的. 事实上大家见到的很多,用到的也很多,比如jQ ...
- js中的回调函数
1.你定义的 2.你没有调用 3.但是最终他执行了 例子: 定时器回调函数 setTimeout(function(){ },100); dom元素的回调函数 document.getElementB ...
- PHP中的回调函数和匿名函数
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 理解javascript中的回调函数(callback)【转】
在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...
随机推荐
- postgresql 导出建表语句的方法-类似describe table
https://www.youtube.com/watch?v=PMfcsYzj-9M 这个视频不错, The Definitive Guide to Object-Oriented JavaScr ...
- [AngularJS + Unit Testing] Testing a component with requiring ngModel
The component test: describe('The component test', () => { let component, $componentController, $ ...
- google protocol buffer的原理和使用(一)
一.简单的介绍 Protocol buffers是一个用来序列化结构化数据的技术,支持多种语言诸如C++.Java以及Python语言.能够使用该技术来持久化数据或者序列化成网络传输的数据. ...
- HDU 2955 Robberies(01背包变形)
Robberies Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- 【数据结构】二叉树(c++)
头文件: #include <iostream> using namespace std; template<class Type> class Bintree; //结点类 ...
- 设计模式学习笔记——Template Method模板方法模式
可能是最简单的设计模式. 而且你我都用过而不自知. 因为,模板方法模式也者,就是面向对象中的继承.公用部分放在父类,子类继承父类,然后扩展.呵呵.
- String,StringBuilder与StringBuffer的区别
相信大家看到过很多比较String和StringBuffer区别的文章,也明白这两者的区别,然而自从Java 5.0发布以后,我们的比较列表上将多出一个对象了,这就是StringBuilder类.St ...
- Thread Runnable 区别
[线程的并发与并行] 在单CPU系统中,系统调度在某一时刻只能让一个线程运行,虽然这种调试机制有多种形式(大多数是时间片轮巡为主),但无论如何,要通过不断切换需要运行的线程让其运行的方式就叫并发(co ...
- Xamarin.Android 记事本(二)自定义AlertDialog
导读 1.自定义一个AlertDialog 2.添加一条数据 正文 记事本应当有一个添加功能,这里我打算在右上角放一个item,然后点击这个item弹出一个对话框,输入名称,点击确定跳转到另一个act ...
- android 图片内存问题
在android开发过程中,经常遇到oom的问题,原因有很多种,其中最难处理的是图片造成的oom,于是在网络上对比了几个图片加载的库,最终选择了Facebook的fresco库(github地址:ht ...