回调函数的定义
语法
- 回调函数
- 匿名回调函数
回调函数的特点
- 不会立刻执行
- 是个闭包
- 执行前类型判断
this的使用
允许传递多个回调函数
回调函数嵌套
回调函数的优点和使用场景
- 优点
- 使用场景
实战

回调函数的定义

In computer programming, a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time

回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码。

在JavaScript中函数也是对象的一种，同样对象可以作为参数传递给函数，因此函数也可以作为参数传递给另外一个函数，这个作为参数的函数就是回调函数。

语法

回调函数

function add(num1, num2, callback){var sum = num1 + num2;callback(sum);
}function print(num){console.log(num);
}add(1, 2, print);       //=>3

举例：

<!DOCTYPE html>
<html>
<body>
<title>回调函数</title>
<script language="javascript" type="text/javascript">function add(num1 ,num2 ,callback){var sum = num1 + num2;callback(sum);}function doSummary(sum){alert(sum);}add(3,5,doSummary);
</script>
</body>
</html>

匿名回调函数

function add(num1, num2, callback){var sum = num1 + num2;callback(sum);
}add(1, 2, function(sum){console.log(sum);       //=>3
});

举例：

<!DOCTYPE html>
<html>
<body>
<title>匿名回调函数</title>
<script language="javascript" type="text/javascript">function add(num1 ,num2 ,callback){var sum = num1 + num2;callback(sum);}add(3,5,function(sum){alert(sum);});
</script>
</body>
</html>

我们经常使用的jQuery中大量的使用了回调函数

$("#btn").click(function() {alert("button clicked");
});

回调函数的特点

不会立刻执行

回调函数作为参数传递给一个函数的时候，传递的只是函数的定义并不会立即执行。和普通的函数一样，回调函数在函调用函数中也要通过()运算符调用才会执行。

是个闭包

回调函数是一个闭包，也就是说它能访问到其外层定义的变量。

执行前类型判断

在执行回调函数前最好确认其是一个函数。

function add(num1, num2, callback){var sum = num1 + num2;if(typeof callback === 'function'){callback(sum);}
}

this的使用

注意在回调函数调用时this的执行上下文并不是回调函数定义时的那个上下文，而是调用它的函数所在的上下文.

ar obj = {sum: 0,add: function(num1, num2){this.sum = num1 + num2;}
};function add(num1, num2, callback){callback(num1, num2);
};add(1,2, obj.add);
console.log(obj.sum);           //=>0
console.log(window.sum);        //=>3

上述代码调用回调函数的时候是在全局环境下，因此this指向的是window，所以sum的值是赋值给windows的。

关于this执行上下文的问题可以通过apply方法解决。

var obj = {sum: 0,add: function(num1, num2){this.sum = num1 + num2;}
};function add(num1, num2, callbackObj, callback){callback.apply(callbackObj, [ num1, num2 ]);
};add(1,2, obj, obj.add);
console.log(obj.sum);           //=>3
console.log(window.sum);        //=>undefined

允许传递多个回调函数

一个函数中可以传递多个回调函数，典型的例子如jQuery

function successCallback() {// Do stuff before send
}
function successCallback() {// Do stuff if success message received
}
function completeCallback() {// Do stuff upon completion
}
function errorCallback() {// Do stuff if error received
}
$.ajax({url: "http://fiddle.jshell.net/favicon.png",success: successCallback,complete: completeCallback,error: errorCallback
});

回调函数嵌套

一个回调函数中可以嵌入另一个回调函数，对于这种情况出现多层嵌套时，代码会难以阅读和维护，这个时候可以采用命名回调函数的方式调用，或者采用模块化管理函数，也可以用promise模式编程。

回调函数的优点和使用场景

优点

DRY，避免重复代码。
可以将通用的逻辑抽象。
加强代码可维护性。
加强代码可读性。
分离专职的函数。

使用场景

异步编程。
事件监听、处理。
setTimeout、setInterval方法。
通用功能，简化逻辑。

实战

CommonAction.qryTableDate是异步调用的，所以在外层无法获取函数里面的值，不能直接返回，采用回调的方式：给documentTypeMapping这个函数设置一个回调函数，在CommonAction的回调里面调用传过来的这个回调函数。

//documentType switch  id to name
// 两个入参 docmentTypeId 和 回调函数
documentTypeMapping: function (documentType,returnDocumentTypeNameCallback){var documentMappingName ;// load from dbvar certTypeParam = {tableName: 'CERT_TYPE',columnArray: ["CERT_TYPE_ID", "CERT_TYPE_NAME", "CERT_TYPE_CODE", "CUST_TYPE"]};// 异步的方法，无法在外层直接获取到documentMappingName,通过回调获取
CommonAction.qryTableDate(certTypeParam, 'POST', function (result) {fish.forEach(result, function (val) {if (val.dataValueArray[3] == '' || val.dataValueArray[3] == 'A') {if(val.dataValueArray[0] == documentType){documentMappingName = val.dataValueArray[1];console.log("Name:" + documentMappingName);// 回调函数                         returnDocumentTypeNameCallback(documentMappingName);}}});})}

调用

// 第二个参数为回调函数,获取 documentMappingName，设置在组件上
that.documentTypeMapping(result.documentType,function(documentMappingName) {that.$('input[name="documentType"]').combobox('text', documentMappingName);})

JavaScript-回调函数相关推荐

javascript 回调函数
javascript 回调函数回调函数作为参数传递的函数示例代码 let x = function () {console.log("执行回调函数") }let y = fu ...
理解javascript 回调函数
理解javascript 回调函数原文:理解javascript 回调函数 ##回调函数定义百度百科:回调函数回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一 ...
javascript回调函数笔记
来源于:https://github.com/useaname/blog-study 在Javascript中,函数是第一类对象.意味函数可以像对象一样按照第一类被管理使用. 回调函数是从一个叫函数式 ...
javascript回调函数(模式)原理和示例深入分析
广大网友读懂了我之前论述的javasc ...
重新理解javascript回调函数
把函数作为参数传入到另一个函数中.这个函数就是所谓的回调函数经常遇到这样一种情况,某个项目的A层和B层是由不同的人员协同完成.A层负责功能funA,B层负责funcB.当B层要用到某个模块的数据,于 ...
JavaScript回调函数的高手指南
摘要:本文将会解释回调函数的概念,同时帮你区分两种回调:同步和异步. 回调函数是每个前端程序员都应该知道的概念之一.回调可用于数组.计时器函数.promise.事件处理中. 本文将会解释回调函数的概念 ...
javascript回调函数及推论
回调函数:通过函数指针调用函数,把一个函数的指针传给另外一个函数. 从基本定义上,就可以开始基础推论. A.合并功能域. 1.以函数分割功能域. 2.以模块分割功能域. 3.以 ...
理解javascript 回调函数，闭包
回调 jQuery中一直有使用回调函数,比如:$("#btn").click(function() {alert("button clicked"); }); ...
JavaScript 回调函数/Promise/ async/await
并发和并行并行和并发是两个概念,容易混淆是因为并行和并发在中文意思上相近,其实在英文中,这是完全不相同的东西,并行(parallelism).并发(concurrency). 并行(parallel ...
JavaScript回调函数（callback）概念和应用，千万别错过！
在前端开发中,回调函数是一个非常重要的概念,我们经常会在项目中使用到它,但对于一些初学者来说比较难以理解.今天小千就来给大家介绍一下回调函数的概念和使用,千万不要错过了. 回调函数的概念什么是回调函 ...

JavaScript-回调函数