如何写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

原文地址:https://www.cnblogs.com/amcy/p/9912285.html

时间: 2024-11-08 18:21:18

如何写JavaScript中的callback回调函数的相关文章

JavaScript之callback回调函数

以下内容借鉴老鸟的经验和知识,结合自己的学习,精髓的总结. 一句话:对于以后研究node 和那些热门的前端框架 很有帮助.如果你看过这个文章,对于你来说是质的突变. 理解javascript中的回调函数(`callback`),希望对你有所帮助. 在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,和其它String.Array.Number.Object类的对象一样用于内置对象的管理. function实际上是一种对象,它可以"存储在变量中,通过参数传递给(别一

百度地图 在加载过程中,根据回调函数结果中第一个点设置为中心点

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script&g

javascript中的立即执行函数(function(){…})()

javascript中的立即执行函数(function(){…})() 深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包住业务代码,使用jquery时比较常见. ( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此.要

JavaScript 中对变量和函数声明的提前示例

如题所示,看下面的示例(可以使用Chrome浏览器,然后F12/或者右键,审查元素.调出开发者工具,进入控制台console输入)(使用技巧: 控制台输入时Shift+Enter可以中途代码换行) var name = "xiaoming"; (function(){ var name = name || "小张"; console.info(name); })();// 小张 (function(){ name = name || "小张";

深入理解javascript中的立即执行函数(function(){…})()

这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){-})()包住业务代码,使用jquery时比较常见,需要的朋友可以参考下http://www.jb51.net/article/50967.htm javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( function()

JavaScript中的内置函数

JavaScript中的内置函数 制作人:全心全意 在使用JavaScript语言时,除了可以自定义函数之外,还可以使用JavaScript的内置函数,这些内置函数是由JavaScript语言自身提供的. JavaScript中的内置函数如下表所示: 函     数 说     明 eval() 求字符串中表达式的值 isFinite() 判断一个数值是否为无穷大 isNaN() 判断一个数值是否为NaN parseInt() 将字符串型转换为整型 parseFloat() 将字符串型转换为浮点

javascript中的立即执行函数

javascript中的立即执行函数$(function(){ alert();}()) Highcharts的中的 series:[{ name: '今日在线人数', color: 'pink', data: (function(){ )()) }] #执行效果一样$( document ).ready(function() { console.log( "ready!" ); }); 和 $(function() { console.log( "ready!"

UA判断打开页面的环境,然后在callBack写相应环境下的回调函数

(function(){ /* * 使用方法: * 一.引入ua.js * 二.直接调用 MobilePort 对象的属性与方法. * * MobilePort 对象 * 属性:MobilePort.back;// 数组 内容如下 * 方法:MobilePort.androidBrowser(callBack) 安卓浏览器 //callBack 回调只有在安卓浏览器下执行 * 方法:MobilePort.iosBrowser(callBack) ios浏览器 // 下面全部类似 * 方法:Mob

callback回调函数理解 相当于this指针

1.callback函数在微软的官方手册中是这样定义callback函数的:"callback函数是由应用程序定义而由操作系统调用的函数".   凡是由用户设计而却由windows系统调用的函数,统称为callback函数,这些函数都有一定的类型,以配合windows的调用操作.      某些api函数以callback作为其参数之一,这些api,如settimer.linedda.enumobjects.通常这种api会在进行某 种行为之后或满足某种状态之时调用该callback函