JavaScript中的回调函数

什么是回调函数

回调函数（Callback）是一段可执行的代码段（通常包装成一个函数），它会作为一个参数传递给其他的代码（通常也是一个函数）。回调函数会等待父函数执行完毕后立即执行，而与此同时，其他函数的调用不会受到阻塞。

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. Callbacks are special because they patiently wait to execute until their parent finishes. Meanwhile, the browser can be executing other functions or doing all sorts of other work.

— jQuery 官网

打个比方，你到一个商店买东西，不巧你要的东西没货了，你会怎么办呢？

每天去一趟商店，看东西到货了没
你给店员留了个电话，让他等东西到货后马上给你打电话

前者是轮询，后者就是回调。

在这个回调机制里，你的电话号码就是回调函数，你把电话留给店员叫传递回调函数，东西到货叫做触发回调关联的事件，店员给你打电话就是调用回调函数。

回调函数怎么用

上面已经提到，JavaScript 中的回调函数一般都是作为参数传递给另外一个函数。下面分回调函数有没有参数两种情况分别说明如何传递它给父函数。

没有参数的回调函数

如果回调函数没有参数，那么你可以这么传递给父函数：

$.get( "mypage.html", myCallBack );

当 $.get() 函数请求 mypage.html 完毕后，浏览器就会执行 myCallBack() 函数。

注意，第二个参数就是函数名形式传递给父函数，不要把它写成了字符串形式，即不能加引号。

带有参数的回调函数

如果回调函数带有参数，很多人第一反应会这么使用：

$.get( "mypage.html", myCallBack( param1, param2 ) );   //Wrong!!!

这就大错特错啦！

因为这行代码会先执行 myCallBack( param1, param2 ) 函数，然后把这个 函数的返回值 作为参数传递给 $.get() 。如果你确实想这么做，那当然是可以的。

但如果你是想把带有参数的 myCallBack() 作为回调函数使用，你就必须使用 匿名函数 把它包装起来：

$.get( "mypage.html", function() {
 
    myCallBack( param1, param2 );
 
});

这个匿名函数只做一件事，就是调用带有参数 param1 与 param2 的函数 myCallBack() 。

当 $.get() 函数请求 mypage.html 完毕后，浏览器就会执行这个匿名函数，也就相当于执行 myCallBack( param1, param2 ) 。

结语

在 JavaScript 中回调函数几乎无处不在。回调本质上是一种设计模式，这种机制为编程提供了非常大的灵活性。