JavaScript回调函数详解：从概念到实战应用

回调函数的基本概念

回调函数的基本概念

回调函数是指通过函数指针进行调用的函数。当将一个函数的地址作为参数传递给另一个函数，并在该指针被用于调用其所指向的函数时，即构成回调。回调并非由实现方直接调用，而是在特定事件或条件触发时由另一方调用，以响应该事件或条件。

上述定义较为抽象，以下引用知乎上的通俗解释以辅助理解。

类比场景：你去商店购物，所需商品缺货，于是留下电话号码。几天后商品到货，店员打电话通知你，你随后到店取货。在此过程中，你的电话号码即为回调函数，留电话的行为是登记回调函数，商品到货是触发回调关联事件，店员打电话是调用回调函数，到店取货则是响应回调事件。

在JavaScript语境下的定义：

若函数A作为参数（即函数引用）传递给另一个函数B，且函数B执行了函数A，则称函数A为回调函数。若该函数没有具体名称（即函数表达式），则称为匿名回调函数。
本质上，这即是把函数作为参数进行传递的操作。

JavaScript中的Callback机制

JavaScript中的Callback机制

让我们摒弃复杂的理论解释，直接探究Callback的本质。

什么是Callback？

以jQuery中的hide方法为例，其结构大致如下：

$(selector).hide(speed,callback)

具体使用方式如下：

$('#element').hide(1000, function() {
// 回调函数体
});

我们只需在内部编写一个简单的函数逻辑。

$('#element').hide(1000, function() {
console.log('Hide');
});

需要注意的是，Callback函数会在当前动画100%完成后执行。实际运行现象为：当id为element的元素隐藏完毕后，控制台会输出'Hide'。

这意味着：

Callback实际上是指当一个函数执行完毕后，随后执行的那个函数即为所谓的回调函数。

Callback的作用

Callback的作用

常规情况下，函数按顺序执行，但JavaScript是一种事件驱动的语言。

function hello(){
console.log('hello');
}
function world(){
 console.log('world');
}
hello();
world();

因此，正常情况下代码会按顺序执行。然而，当执行world事件的时间较长时，情况会有所不同。

function hello(){
setTimeout( function(){
console.log( 'hello' );
}, 1000 );
}
function world(){
 console.log('world');
}
hello();
world();

此时执行顺序将发生变化：先输出world，再输出hello。因此，我们需要使用Callback来确保逻辑顺序。

Callback实例演示

Callback实例演示

以下是一个简单的示例：

function add_callback(p1, p2 ,callback) {
var my_number = p1 + p2;
callback(my_number);
}
add_callback(5, 15, function(num){
 console.log("call " + num);
});

在示例中，add_callback函数接收三个参数：前两个为相加的操作数，第三个为回调函数。函数执行时返回相加结果，并在控制台输出'call 20'。