3-1 理解回调函数
本节编程练习不计算学习进度,请电脑登录imooc.com操作

理解回调函数

本章主要讲解回调函数在jQuery中的使用技巧与实现原理,概念上的东西看似简单,但是在实际运用中要做到灵活自如却也不是那么容易的事,而且对于部分开发者来说它仍然是一个谜。在阅读本文之后你能深入理解这个“回调函数”。

函数是第一类对象,这是javascript中的一个重要的概念。意味着函数可以像对象一样按照第一类管理被使用,所以在javaScript中的函数:

    ☑   能“存储”在变量中

      能作为函数的实参被传递

    ☑   能在函数中被创建

      能从函数中返回    

百科里面是这么解释的:

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针调用它所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件条件进行响应。

因此从上面可以看出来,回调本质上是一种设计原则,并且jQuery的设计原则遵循了这个模式。

在后端的编程语言中,传统函数以参数形式输入数据,并且使用返回语句返回值。理论上,在函数结尾处有一个return返回语句,结构上就是:一个输入和一个输出。简单的理解函数本质上就是输入和输出之间实现过程的映射

但是,当函数的实现过程非常漫长,你是选择等待函数完成处理,还是使用回调函数进行异步处理呢?这种情况下,使用回调函数变得至关重要,例如:AJAX请求。若是使用回调函数进行处理,代码就可以继续进行其他任务,而无需空等。实际开发中,经常在javascript中使用异步调用。

jQuery中遍地都是回调的设计:

异步回调:

事件句柄回调

$(document).ready(callback);
$(document).on(‘click’,callback)

Ajax异步请求成功失败回调

$.ajax({
  url: "aaron.html",
  context: document
}).done(function() { 
        //成功执行
}).fail(function() {
        //失败执行
);

动画执行完毕回调

$('#clickme').click(function() {
    $('#book').animate({
        opacity: 0.25,
        left: '+=50',
        height: 'toggle'
    }, 5000, function() {
        // Animation complete.
    });
});

以上都是jQuery的回调直接运用,运用基本都是将匿名函数作为参数传递给了另一个函数或方法。而且以上都有一个特点,执行的代码都是异步的。

同步回调:

当然回调不仅仅只是处理异步,一般同步(很耗时的任务)的场景下也经常用到回调,比如要求执行某些操作后执行回调函数。

一个同步(阻塞)中使用回调的例子,目的是在test1代码执行完成后执行回调callback

var test1 = function(callback) {
    //执行长时间操作
    callback();
}
test1(function() {
    //执行回调中的方法
});

 

所以理解回调函数最重要的2点:

1、一个回调函数作为参数传递给另一个函数是,我们仅仅传递了函数定义。我们并没有在参数中执行函数。我们并不传递像我们平时执行函数一样带有一对执行小括号()的函数

2、回调函数并不会马上被执行,它会在包含它的函数内的某个特定时间点被“回调”。

任务

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://img1.sycdn.imooc.com//down/540812440001e40e00000000.js" type="text/javascript"></script>
  6. <script src="http://img1.sycdn.imooc.com//down/541f6ff70001a0a500000000.js" type="text/javascript"></script>
  7.  
  8. <title></title>
  9. </head>
  10. <body>
  11.  
  12. <div id="target">
  13. 点击触发事件回调
  14. </div>
  15.  
  16.  
  17. <img id="book" alt="" width="100" height="123"
  18. style="position: relative; left: 10px;background:#ccc" />
  19.  
  20. <div id="clickme">
  21. 点击动画等待动画结束后回调
  22. </div>
  23.  
  24. <script type="text/javascript">
  25.  
  26.  
  27. //同步回调
  28. function callback(args, fn) {
  29. var args = args * 2;
  30. fn(args);
  31. }
  32.  
  33. callback(2, function(value) {
  34. show('同步回调->'+ value)
  35. })
  36.  
  37.  
  38. //异步事件回调
  39. $("#target").click(function() {
  40. show("异步事件回调");
  41. });
  42.  
  43. //异步动画回调
  44. $('#clickme').click(function() {
  45. $('#book').animate({
  46. opacity: 0.25,
  47. left: '+=50',
  48. height: 'toggle'
  49. }, 1000, function() {
  50. show('异步动画回调')
  51. });
  52. });
  53.  
  54. </script>
  55. </body>
  56. </html>
下一节