js的回调函数
介绍
首先从英文介绍开始
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.
这里只是js里的解释。
开始
字面上理解下来就是,回调就是一个函数的调用过程。那么就从理解这个调用过程开始吧。函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。
其实中文也很好理解:回调,回调,就是回头调用的意思。函数a的事先干完,回头再调用函数b。
举个现实的例子:约会结束后你送你女朋友回家,离别时,你肯定会说:“到家了给我发条信息,我很担心你。”对不,然后你女朋友回家以后还真给你发了条信息。小伙子,你有戏了。
其实这就是一个回调的过程。你留了个函数b(要求女朋友给你发条信息)给你女朋友,然后你女朋友回家,回家的动作是函数a。她必须先回到家以后,函数a的内容执行完了,再执行函数b,然后你就收到一条信息了。
这里必须清楚一点:函数b是你以参数形式传给函数a的,那么函数b就叫回调函数。
也许有人有疑问了:一定要以参数形式传过去吗,我不可以直接在函数a里面调用函数b吗?确实可以。求解中。
解惑:如果你直接在函数a里调用的话,那么这个回调函数就被限制死了。但是使用函数做参数就有下面的好处:当你a(b)的时候函数b就成了回调函数,而你还可以a(c)这个时候,函数c就成了回调函数。如果你写成了function a(){...;b();}就失去了变量的灵活性。
上一段代码大家可以跑一下:
function a(callback)
{
alert("我是parent函数a!");
alert("调用回调函数");
callback();
}
function b(){
alert("我是回调函数b");
}
function c(){
alert("我是回调函数c");
}
function test()
{
a(b);
a(c);
}
根据代码示例加深理解
问题:
现在有函数如下定义:
function A(a,callback){
....
}
function B(){
....
}
则可以有如下调用
A(a,B);来实现回调。
现在我希望传给B一个参数c,即实现类似于: A(a,B(c)); 的效果,应该如何实现?
function A(a,callback){
var b=callback;
alert(a+b);
}
function B(c){
return (-c);
}
A(4,B(3))
根据jquery的ajax请求常见的场景再去写一个示例:
我包装了jQuery的ajax方法:
function doAjax(u,param,callback){
$.ajax({
type:'POST',
url:u,
data:param,
success:callback
});
}
function showAlert(data){
alert(data);
}
比如这样调用 doAjax("url","id=1",showAlert);
$.ajax 在success后,会返回一个data到showAlert中,显示出来 ,没有问题.
可是,当我想多传一个参数给showAlert时怎么写?
写成doAjax("server.php","id=12&type=1",showAlert("hi",data))、或者把上面的success:callback 写成success:callback(msg,data)显然都不行,如之奈何?
其实很简单,很多方法都定义了回调函数,回调函数也是函数,就是说不管怎么传,只需要是个函数类型即可。写法如下:
方式1,
doAjax(参数1,参数2,function(request,opts){
callback(request,opts,agrs);
});
function callback(request,opts,args){
};
方式2,
var args=N;
doAjax(参数1,参数2,function(request,opts){
var X=N;
回调函数代码块..
和以上几乎一样,看个人编码方式选择。
});
再看一个从父函数传递给回调函数的示例
function e(m,n,Callback){
var d = m+n;
alert("一个从父函数e 产生的参数将要被传递给回调函数 ,这个参数是:"+d);
//这里才写你想调用的函数---参数要正确
Callback(d);
}
function callback(data){
alert("我是回调函数,我的名字叫:callback ,我接收到来自父函数的参数,参数是:"+data);
}
e(1,2,callback)
最后
感谢各位的阅读,如有问题麻烦及时指正出来。
---------------------
作者:月亮巡视人间
来源:CSDN
原文:https://blog.csdn.net/undericon/article/details/81188923
版权声明:本文为博主原创文章,转载请附上博文链接!
js的回调函数的更多相关文章
- 关于js的回调函数的一点看法
算了一下又有好几个月没写博客了,最近在忙公司android的项目,所以也就很少抽时间来写些东西了.刚闲下来,我就翻了翻之前看的东西.做了android之后更加感觉到手机端开发的重要性,现在做nativ ...
- js的回调函数详解
本文主要介绍了个人对于javascript中回调函数的理解和使用方法及示例,需要的朋友可以参考下 现在做native App 和Web App是主流,也就是说现在各种基于浏览器的web app框 ...
- js的回调函数 一些例子
这边用bootstrap 3.0的 上传控件做例子 下面是上传控件的一段完整的 js 操作 代码. <!-- 上传缩略图控件配置 --><script> // 定义这四个全局 ...
- 没办法,还是要补一下js,回调函数(转载)
<html> <head> <title>回调函数(callback)</title> <script language="javasc ...
- JS 自定义回调函数callback
1 应用场景:js的异步加载,在get,post,ajax异步加载的时候,可能对应的请求没有完成,这时需要使用请求回来的数据作为参数调用其他函数,这时就需要使用回调函数. 2 回调函数作用:等待函数调 ...
- Js 自定义回调函数
参考 http://mlxnle.iteye.com/blog/1670679 <!doctype html> <html lang="es"> <h ...
- Node.js:回调函数
概要:本篇博客主要通过对比node.js异步与同步方式读取文件的方式来解释node中回调函数的作用. 1.异步方式读取文件: 新建一个文本文档用于测试,如下图: 代码如下: // node异步方式读取 ...
- node.js 中回调函数callback(转载),说的很清楚,看一遍就理解了
最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(fu ...
- JS中回调函数的写法
<!DOCTYPE HTML> <html><head> <meta charset="GBK" /><title>回 ...
随机推荐
- JS运算符、NaN
一.关系运算符 (< <= > >= == === != !==) 判断符号左右的两个数据的大小之间的关系,运算结果是一个布尔类型的值 == 只判断值 ===即判断值并且 ...
- 安卓使用TextView实现图片加文字说明
背景:通讯录列表,每个单元格显示头像+名字,且头像显示圆形 方案一:ImageView + TextView 方案二:只用TextView + drawableLeft 属性 <TextView ...
- Java8-Map
1.Staff实体 public class Staff { private String name; private int age; private String address; public ...
- 获取某个元素第一次出现在数组(json数组)的索引
function firstIndex(arr, text) { // 若元素不存在在数组中返回-1 let firstVal = -1; for (let i = 0; i < arr.len ...
- vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
- 开发过程中 的一些 补充知识点 + 关于mysql中的日期和时间函数?
参考: https://www.jb51.net/article/23966.htm https://yq.aliyun.com/articles/260389 mysql中的 日期格式是: HHHH ...
- MySQL中select、insert、update批量操作语句
项目中经常的需要使用批量操作语句对数据进行操作,使用批量语句的时候需要注意MySQL数据库的条件限制,这里主要是数据的大小限制,这里对批量插入.批量查找及批量更新的基础操作进行下简单的汇总. 1.批量 ...
- chromdriver与geckodriver和浏览器版本问题
chromdriver74与chrom74对应 geckodriver024与Firefox66对应 亲测有效
- java中==和equals的区别(转)
java中的数据类型,可分为两类: 1.基本数据类型,也称原始数据类型.byte,short,char,int,long,float,double,boolean 他们之间的比较,应用双等号(== ...
- Valotile关键字详解
在了解valotile关键字之前.我们先来了解其他相关概念. 1.1 java内存模型: 不同的平台,内存模型是不一样的,我们可以把内存模型理解为在特定操作协议下,对特定的内存或高速缓存进行读写访问 ...