ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

sd

2020-06-07 15:09:27  阅读:332  来源: 互联网

标签:md cm color inner 0px margin sd


<!doctype html>#简单理解回调函数

<style></style>

简单理解回调函数

如果,一个程序这样执行:

      5         1
console.log("hello world!");
2
3
setTimeout(()=>{
4
console.log("执行setTimeout完毕。")
5
},2000);
   

会输出这样的结果:

      3         1
$ node index.js
2
hello world!
3
执行setTimeout完毕。
   

那是所有学过js的人都能够理解的。它将依照js从上之下顺序执行的规则,先输出hello world! -- 等待2s -- 输出执行setTimeout完毕。

 

但是,如果我们希望先执行setTimeout,待其执行完毕再打印hello world!应该怎么办?

如果你这样尝试:

      5         1
setTimeout(()=>{
2
console.log("执行setTimeout完毕。")
3
},2000);
4
5
console.log("hello world!");
   

显然是达不到我们的目的的,它还是会像上面那样输出。

之所以会出现这个问题,并不是说程序的执行不是从上到下,依次执行,只不过setTimeout函数,是异步执行函数,参看[Node.js中的异步到底是个啥?,其实也是用回调函数来实现的,这里不必深究,完全可以把它当作,setTimeout函数就是后执行的。

为了解决这样一种问题,才有了回调函数的概念

其实,回调函数并不是什么新的技术,只是一种提炼化的思想。

我们可以简单的理解为,回调函数,就是回头调用。

那么实现我们上面说的需求,就可以这样去实现。

      17         1
//定义函数1
2
function helloWorld(){
3
console.log("hello world!");
4
}
5
6
//定义函数2
7
function trigger (callbackFunc){
8
setTimeout(()=>{
9
console.log("执行setTimeout完毕。");
10
//执行函数1
11
        callbackFunc()
12
},2000);
13




14

}
15
16
//执行函数2
17
trigger(helloWorld);
          3         1
$ node index.js
2
执行setTimeout完毕。
3
hello world!
   

我们先是创建了一个函数1:helloWorld,然后,创建函数2:trigger。 其中,我们再给函数2定义的时候,定义了一个形参,然后再调用函数2的时候,把函数1作为参数传入函数2。 然后,再函数2中,我们把函数1也放在 了setTimeout中去执行,这样,就实现了先打印“执行setTimeout完毕。” 后打印"hello world!"

其实,我们可以发现,这和下面这段函数好像没有啥本质区别。

      8         1
function trigger (){
2
setTimeout(()=>{
3
console.log("执行setTimeout完毕。");
4
console.log("hello world!");
5
},2000);
6
}
7
8
trigger();
   

实际上,就是没有本质区别。

如果,你还是觉得似乎哪里不好理解,那你再看看下面这种写法:

      14         1
function helloWorld(){
2
console.log("hello world!");
3
}
4
5
function trigger (){
6
setTimeout(()=>{
7
console.log("执行setTimeout完毕。");
8
helloWorld()
9
},2000);
10




11

}
12
13
trigger();
14
   

执行函数trigger(),然后在trigger的函数体中去调用helloWorld,这和上面的所谓回调函数,有区别吗?

只不过是把被调用的函数作为一个参数传递进了函数体而已。所以再看文章开头这句话 “我们可以简单的理解为,回调函数,就是回头调用。”,其实,不就是我们天天在写的调用吗? 什么破j8回调函数,不就这么简单个事。

 

但是,它有没有被注意的地方? 当然有。在我们实际的开发工作中,代码块可不都是一行console.log()就完事了,所以这里才看起来似乎没有必要。把函数作为参数去传入函数体去调用这种思想即回调,使得我们的代码更加的简洁,并且,很多情况下,可以传入不同的函数去调用,这样使得我们的代码会更加的灵活,实现代码复用。

不然,很可能你写的代码都是这样的:

image-20200607142544470

这是谁写的呢。。。。emmm。。。。

 

标签:md,cm,color,inner,0px,margin,sd
来源: https://www.cnblogs.com/jaycethanks/p/13060598.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有