首页 > 代码库 > JavaScript中的回调函数

JavaScript中的回调函数

  在学习JavaScript的过程中遇到了很多,使用到回调函数的例子,出现了许多疑问,就由一个栗子开始吧:

  在JavaScript中接触的第一个回调函数是在setInterval()和setTimeout()中出现的:

 

1   var num = 10;
2 
3   var interValId = setInterval(function (){
4       console.log(num);
5       num--;
6       if(num==0){
7         clearInterval(interValId);
8      }
9  },1000);

 

 

 

 

  代码中实现了使用了setInterval()在控制台打印数值,然后当数值变为0的时候停止打印。

  在使用setInterval()的时候使用了一个匿名函数作为回调函数,当时看到这,就懵掉了,

此匿名函数没有实参列表,也就是说这是一个函数声明,不是调用,而且这个匿名函数写在setInterval()的形参列表位置,说明它是setInterval()的形参,但是这个函数是在什么时候调用的呢,如果这个函数也需要传参呢,在调用这个匿名函数的时候,又是怎样实现参数传递的呢。

 

  

  再一次遇见它是在学习DOM2中使用addEventListener()进行事件绑定的时候:

  

1 btn2.addEventListener("click",function (){
2     btn1.removeEventListener("click",func1)
3 },false)

  在取消事件绑定的时候,有个要求,就是removerEventListener()中的回调函数不能是匿名函数。但是问题还是没有解决,接下来又遇到了有形参列表的回调函数:

  数组中的排序函数:sort();

1         arr3.sort(function(a,b){
2             //return a-b; // b在前,a在后(升序排列)
3             return b-a;  // a在前,b在后(降序排列)
4         });

  这次的回调函数竟然有了形参,但是问题还是那个问题,这里的形参a,b什么时候变为实参的?他们被赋予实参的时候,赋的值又是什么呢?

  所有的可能性都被排除了,只有一种就是,sort()这个函数给回调函数的参数进行赋值,并把回调函数进行了调用,这样就要求,回调函数的函数声明必须按照调用它的函数的规定进行编写,就是调用它的函数需要它完成什么样的功能,回调函数的函数体应该是怎样的,而且它的参数也不能乱写,必须按照规定写形参,他在调用的时候,传了几个实参,就要写几个形参。

  在使用系统已经写好的函数中编写回调函数的时候,程序员们需要完成的部分,只是回调函数的声明部分,而且参数必须按照规定写。

   

  函数也是对象

  想弄明白回调函数,首先的清楚地明白函数的规则。在javascript中,函数是比较奇怪的,但它确确实实是对象。确切地说,函数是用function()构造函数创建的function对象。function对象包含一个字符串,字符串包含函数的javascript代码。代码怎么可能是字符串?对于javascript来说,这很平常。数据和代码之间的区别是很模糊的。

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

  因此,回调本质上是一种设计模式,并且jQuery(包括其他框架)的设计原则遵循了这个模式。

  在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。

  因此callback 不一定用于异步,一般同步(阻塞)的场景下也经常用到回调,比如要求执行某些操作后执行回调函数。

JavaScript中的回调函数