如何写JavaScript中的callback回调函数
如何写回调函数?
如果自己在写一个方法或函数,你有可能会遇到需要一个回调函数。下面就是一个简单的常见回调函数例子:
function mySandwich(param1, param2, callback) {
alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);
callback();
} //调用该方法函数
mySandwich('ham', 'cheese', function() {
alert('Finished eating my sandwich.');
});
我们有一个叫mySandwich的函数,它接受三个参数。第三个参数就是回调函数。当执行这个方法的时候,它会弹出
一个对话框,然后才执行回调函数。注意这里第三个参数是一段函数声明,这段声明在mySandwich里面被执行。
这个参数就是回调函数。
这个回调函数是定义在第三个参数被传入的,而且里面有一个alert来告诉这个函数被执行了。
让回调函数成为可选?
有一件事也许大家都知道,就是JQuery中的回调函数都是可选的,这就意味着如果一个方法接受回调函数,
当我们不传值给这个回调函数,它应该不会报错。但是在我们的下面例子里,如果没有传参:
function mySandwich(param1, param2, callback) {
alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);
callback();
} //调用该方法函数
mySandwich('ham', 'cheese');
控制台会报错:“undefined is not a function” 。
为了让它不报错就有如下代码
function mySandwich(param1, param2, callback) {
alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);
if (callback) {
callback();
}
//此处的代码还可以用下面的方法表示
//callback && callback(); } //调用该方法函数
mySandwich('ham', 'cheese');
现在我们检测了回调函数是否传入了,就不会报错了
让回调函数必须是一个Function?
如果你想让第三个参数无论如何都要传一个Functon,可以按下方法实现:
function mySandwich(param1, param2, callback) {
alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);
if (callback && typeof(callback) === "function") {
callback();
}
} //调用该方法函数
mySandwich('ham', 'cheese', 'vegetables');
注意这里用到typeof运算符,来确保传入值是一个方法,如果不是就会抛异常。
对于延时的注意
尽管回调函数总是最后被执行,但这不总是这样的。举个例子,如果含有回调函数里有一个异步的方法调用(AJAX or an animation),这时候回调会在异步方法调用后执行,但也可能在异步方法返回之前返回。
下面就是一个JQuery animate例子:
function mySandwich(param1, param2, callback) {
alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2); $('#sandwich').animate({
opacity: 0
}, 5000, function() {
// Animation complete.
}); if (callback && typeof(callback) === "function") {
callback();
}
} //调用该方法函数
mySandwich('ham', 'cheese', function() {
alert('Finished eating my sandwich.');
});
尽管回调在异步函数调用之后执行,但是在异步函数返回之前,回调函数就已经结束了。为了解决这种问题,我建议把回调
函数放入animate的回调函数里面。虽然这不能覆盖所有的方法,但是回调函数最基本的意义就在于最后执行。
参考原文:
https://www.cnblogs.com/Alex--Yang/p/3579432.html
如何写JavaScript中的callback回调函数的更多相关文章
- JavaScript Callback 回调函数
JavaScript callback回调函数 你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货.在这 ...
- [转]Javascript中的自执行函数表达式
[转]Javascript中的自执行函数表达式 本文转载自:http://www.ghugo.com/javascript-auto-run-function/ 以下是正文: Posted on 20 ...
- v-if和v-show的区别以及callback回调函数的体会
今天总结一下最近一周碰到的一些问题 一.v-if和v-show的区别 v-show用的是css属性中的display="block/none",元素被隐藏了但是节点还在页面中,但是 ...
- 深入理解javascript中的立即执行函数(function(){…})()
投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...
- 使用Ajax在javascript中调用后台C#函数
使用Ajax在javascript中调用后台C#函数 最近一段时间在紧跟一个网站的项目,数据库中用户表的UserName要求是唯一的,所以当用户选定一个用户名进行注册时要首先检查该用户名是否已被占用, ...
- 在javascript中关于变量与函数的提升
在javascript中关于变量与函数的提升 一.简介 在javascript中声明变量与函数的执行步骤: 1.先预解析变量或函数声明代码,会把用var声明的变量或者函数声明的代码块进行提升操作 2. ...
- javascript中的立即执行函数(function(){…})()
javascript中的立即执行函数(function(){…})() 深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包 ...
- 深入理解javascript中的立即执行函数
这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包住业务代码,使用jquery时比较常见,需要的朋友可以 ...
- JavaScript中的内置函数
JavaScript中的内置函数 制作人:全心全意 在使用JavaScript语言时,除了可以自定义函数之外,还可以使用JavaScript的内置函数,这些内置函数是由JavaScript语言自身提供 ...
随机推荐
- python基础---内置函数 和 匿名函数 知识点自查填空题
1.file ---默认是输出到(),如果设置为(),输出到() 2.sep---打印(),默认为() 3.end---每一次打印的结尾,默认为() 4.flush---立即把内容输出到(),不做() ...
- Maven实战错误笔记:使用mvn archetype:generate报错:Unable to add module to the current project as it is not of packaging type 'pom'
在使用mvn archetype:generate生成Maven实战03:HelloWorld中的HelloWorld的项目骨架时报了这个错,从字面上分析是可能与pom.xml文件有关,然后我看了一下 ...
- 2019.10.30 csp-s模拟测试94 反思总结
头一次做图巨的模拟题OWO 自从上一次听图巨讲课然后骗了小礼物以后一直对图巨印象挺好的233 T1: 对于XY取对数=Y*log(x) 对于Y!取对数=log(1*2*3*...*Y)=log1+lo ...
- HDFS FsImage文件
- Leetcode228. Summary Ranges汇总区间
给定一个无重复元素的有序整数数组,返回数组区间范围的汇总. 示例 1: 输入: [0,1,2,4,5,7] 输出: ["0->2","4->5",& ...
- 【vue】/vue-ele-project
作者大大的地址是:https://github.com/JinwenXie/vue-ele-project 还是老办法,先运行项目看看效果 我不算是外卖爱好者,不过觉得那个添加商品到购物车的动画效果很 ...
- 海量大数据大屏分析展示一步到位:DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践
1. 概述 数据服务(https://ds-cn-shanghai.data.aliyun.com) 是DataWorks产品家族的一员,提供了快速将数据表生成API的能力,通过可视化的向导,一分钟“ ...
- [原创]iFPGA-Cable FT2232H Xilinx / Altera / Lattice 三合一JTAG & UART调试器-详细使用说明
iFPGA-Cable调试器使用说明 全文分为6部分: 第0部分:实物.连线及其驱动安装说明 第1部分:Xilinx JTAG 第2部分:UART 第3部分:Altera JTAG 第4部分:Latt ...
- 非常好理解的KNN算法示例
参考链接:https://www.joinquant.com/post/2227?f=study&m=math:一只兔子帮你理解KNN https://www.joinquant.com/po ...
- 【noip】跟着洛谷刷noip题2
noip好难呀. 上一个感觉有点长了,重开一个. 36.Vigenère 密码 粘个Openjudge上的代码 #include<cstdio> #include<iostream& ...