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>回 ...
随机推荐
- CodeForces - 1033A
Alice and Bob are playing chess on a huge chessboard with dimensions n×nn×n. Alice has a single piec ...
- 劳德巴赫下载kernel和文件系统时问题
用劳德巴赫下载 kernel dtb rootfs BOOT.bin 报错(记了个大概) Bad CRC Ramdisk image is corrupt or invalid 记得之前有人和我说r ...
- 【js】js声明与数据类型
之前整理知识点感觉有点没有针对性,每期知识点之间都没有关联,不成体系,其实对学习与运用知识并无益,随着知识的积累,不使用就会忘记.所以从本次开始,将对知识点进行体系化.先列出本期知识体系图,再进行逐步 ...
- 自定义控件之SegmentControlView
SegmentControlView配合PageView使用 效果图 核心代码 package com.example.segmentcontrolview; import android.conte ...
- Hello2 source analysis
在example目录下的web\servlet\hello2\src\main\java\javaeetutorial\hello2路径里可以找到hello2的GreetingServlet.java ...
- javascript面向对象知识
<html> <head> <script></script> </head> <body> <!-- <scrip ...
- Visual Studio 2017/2019 企业版 Enterprise 激活码
VS2017 Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF VS2017 Professional: KBJFW-NXHK6-W4WJM-CRMQB-G3CDH ...
- 【Mac】【问题】
[一]export: `PATH;': not a valid identifier 可能是环境变量配的有问题 一般是~/.bash_profile 多了空格或是多了$符号之类的
- Economics degrees
Economics degrees Name game"> 经济学学位"> 名称痕戏 Luring students with a new label 新瓶旧酒吸引学生 ...
- XML 与 XML Schema的使用教程
引言:我写本文的宗旨在于给需要使用XML,而又对XML不是很熟悉的人们提供一种使用思路,而不没有给出具体的 使用方法,至于下文中提到的使用方法,还未尝试过,都是从网上整理而来! 一.概述 什么 ...