风华正茂、时光流逝、真爱时光、努力创建辉煌。

【原生】----回调函数---后期更新...

 

 回调函数，来自网友的介绍

 

//定义主函数，回调函数作为参数
function A(callback) {
    callback();  
    console.log('我是主函数');      
}

//定义回调函数
function B(){
    setTimeout("console.log('我是回调函数')", 3000);//模仿耗时操作  
}

//调用主函数，将函数B传进去
A(B);

//输出结果
我是主函数
我是回调函数

 

上面的代码中，我们先定义了主函数和回调函数，然后再去调用主函数，将回调函数传进去。

　　定义主函数的时候，我们让代码先去执行callback()回调函数，但输出结果却是后输出回调函数的内容。这就说明了主函数不用等待回调函数执行完，可以接着执行自己的代码。所以一般回调函数都用在耗时操作上面。比如ajax请求，比如处理文件等。

 

 

另外一种解析

其实中文也很好理解：回调，回调，就是回头调用的意思。函数a的事先干完，回头再调用函数b。

举个现实的例子：约会结束后你送你女朋友回家，离别时，你肯定会说：“到家了给我发条信息，我很担心你。”对不，然后你女朋友回家以后还真给你发了条信息。小伙子，你有戏了。

其实这就是一个回调的过程。你留了个函数b（要求女朋友给你发条信息）给你女朋友，然后你女朋友回家，回家的动作是函数a。她必须先回到家以后，函数a的内容执行完了，再执行函数b，然后你就收到一条信息了。

这里必须清楚一点：函数b是你以参数形式传给函数a的，那么函数b就叫回调函数。

 也许有人有疑问了:一定要以参数形式传过去吗，我不可以直接在函数a里面调用函数b吗？确实可以。求解中。

<解惑:如果你直接在函数a里调用的话，那么这个回调函数就被限制死了。但是使用函数做参数就有下面的好处：当你a(b)的时候函数b就成了回调函数，而你还可以a(c)这个时候，函数c就成了回调函数。如果你写成了function a(){...;b();}就失去了变量的灵活性。>

下面用代码来证实我的理解。

 

 1 <html> 
 2  
 3 <head> 
 4  
 5 <title>回调函数(callback)</title> 
 6 <script language="javascript" type="text/javascript"> 
 7 function a(callback) 
 8 {    
 9     alert("我是parent函数a！"); 
10     alert("调用回调函数"); 
11     callback(); 
12 } 
13 function b(){ 
14 alert("我是回调函数b"); 
15  
16 } 
17 function c(){ 
18 alert("我是回调函数c"); 
19  
20 } 
21  
22 function test() 
23 { 
24     a(b); 
25    a(c); 
26 } 
27  
28 </script> 
29 </head> 
30  
31 <body> 
32 <h1>学习js回调函数</h1> 
33 <button onClick=test()>click me</button> 
34 <p>应该能看到调用了两个回调函数</p> 
35 </body> 
36  
37 </html>

 

posted @ 2019-08-14 20:56  野马,程序源改造新Bug  阅读(120)  评论(0)    收藏  举报