函数的回调
一 理论
```js
// 回调的函数
function callback(data) {}
// 逻辑函数
function func(callback) {
// 函数回调
if (callback) callback(data);
}
// 函数回调的本质：在一个函数中(调用函数)，当满足一定条件，调用参数函数(回调函数)
// 回调函数作为调用函数的参数传入
// 回调函数通过参数将调用还是内部数据传出
二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>函数的回调</title>
</head>
<body>
函数的回调
</body>
<script type="text/javascript">
// 函数回调
// 在一个函数(fn)中,满足条件情况下,调用另外一个函数(func)
// 注:func函数 是 fn函数 的参数(函数作为函数参数传入)
// 解决问题:
// 请求数据 => 数据(return | 函数回调) => 外界
function a_fn(data) {
console.log('a_fn');
// 如果要使用数据,那么定义形参接收参数
console.log(data);
}
function b_fn(a_fn) {
var data = "b_fn 的 数据";
console.log('b_fn');
// 条件: a_fn有值(有函数实现体)
if (a_fn) {
// 调用参数函数
a_fn(data);
}
}
b_fn(a_fn);
// 1.一个函数(函数名)作为另外一个函数的参数
// 2.满足一定的条件,调用参数函数
// 3.形成了函数回调,回调的函数可以获取调用函数的局部变量(将数据携带出去)
</script>
<!-- 函数回调在系统中的使用 -->
<script type="text/javascript">
// 通常情况下,我们的页面标签存不存在点击事件? => 存在
// 点击事件触发后,可不可以对外传送数据 => 可以,eg:点在页面的什么位置
// 系统已经书写好了这种函数回调,但是没有回调体,回调体(回调函数)由普通开发者提供
// 钩子:满足条件情况下被系统回调的函数(方法),称之为钩子函数(方法) <=> 回调函数
document.onclick = function (a, b , c) {
console.log("点击事件");
console.log(a, b , c);
}
</script>
</html>
函数回调的数据请求
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>数据请求</title>
</head>
<body>
</body>
<!-- 外部要接收数据 -->
<!-- 1.外部给内部提供回调函数(函数名callback) -->
<!-- 2.内部将数据反馈给外部回调函数.外部就可以使用内部数据 -->
<script type="text/javascript">
var callback = function (data) {
// 使用数据
console.log(data);
}
</script>
<!-- 请求数据 -->
<script type="text/javascript">
try {
// 采用匿名函数自调用请求数据
(function (callback) {
console.log("开始请求数据...");
// ...
var data = [1, 2, 3, 4, 5];
console.log("数据请求完毕!!!");
// 如果回调函数存在,那么回调对应的函数,并将数据携带出去
if (callback) {
callback(data);
}
})(callback)
// 请求数据完毕之后,需要让外界获取请求的数据:
// 1.函数返回值: 函数的自调用,不存在其他调用者,也就无法获取函数的执行结果 => 行不通
// 2.函数回调
} catch (err) {
}
</script>
<!-- 外部要接收数据 -->
</html>
