【零基础JavaScript教程】#13 JavaScript Callback Function 回调函数 （回呼函式）一个必须搞明白的概念 写高级JavaScript程序就靠它了 | JavaScript Callback For Beginners
☕ ☕ ☕ 如果觉得这些教学对你有用，那就请我喝杯咖啡吧！ 我会继续为你创作更多免费的编程教学视频，让你轻松入门编程。 ✅ https://bit.ly/3kCOpFK ✅ (免费) JavaScript教程系列： https://bit.ly/310cHle ✅ 更多精彩的JavaScript入门课程： http://bit.ly/js-for-beginners ✅ JavaScript相关书籍： 1：The Definitive Guide: Master the World's Most-Used Programming Language - 7th Edition (强烈推荐👍) https://amzn.to/31s30uH ✅（通告）”Codetisan 自学编程社区“ 已经正式开通啦，三人行必有我师，同学们再也不用独自一人闷头自学编程了，快去社区里和其他小伙伴们互动吧！ ▶︎ https://bit.ly/2AHylzN 🔆订阅我的YouTube频道，让你从一个0基础编程的菜鸟快速成为编程大师！🔆 http://bit.ly/2TBkXo1 ▶︎ 文轩解码更精彩的平台 ◀︎ ‣‣ Blogger ：https://bit.ly/2yMz0PC ‣‣ Twitter: https://bit.ly/2R74FS1 ‣‣ Facebook: https://bit.ly/35crcmz ‣‣ Instagram: https://bit.ly/2KH6Wjw ‣‣ Github: https://bit.ly/2SHtsx4 #javascript-callback #回调函数 #回呼函式
文字版内容：
Hi, 大家好，我是文轩
欢迎再次收看文轩解码
如果你想和其他同学一起学习和讨论JavaScript编程
可以扫描这个二维码
去到自学编程社区里和其他同学一起互动
今天我想和同学们分享
另外一个在JavaScript里极其重要的知识点
掌握好这个知识点
就能让你快速掌握前端
和后端JavaScript的高级应用
如果搞不清楚这个知识点的话
就很难深入了解JavaScript程序的执行流程
不利于后期调试程序
要想了解更深层次的JavaScript
同学们就必须掌握前面提到的知识点
callback
什么是callback?
如果我们把callback这个单词拆分
它就变成了call back
从字面上直接翻译的话就是稍后再呼叫
正式的叫法是回调或者回呼
不管是稍后呼叫，回调或者回呼
它的中心思想是
一个超长任务现在需要时间处理
眼下是没办法立即知道它的结果的
所以程序不会傻傻的等待
它会继续处理接下来的任务
当超长任务完成后
才通知程序超长任务已经完成
为什么在JavaScript会有callback 回调这个概念呢？
要解释这个概念
就得先从JavaScript的特性说起
JavaScript执行代码的方法主要分成两大类
同步执行(synchronous execution)
异步执行 (asynchronous execution)
同步执行的意思
是一个任务接一个任务的执行
程序需要等待第一个任务完成后才能执行第二任务
这个比较好理解
比如我们有两个console.log
第一个显示hello
第二个显示world
按同步执行的逻辑
会先执行第一个console.log
输出hello
然后继续执行第二个console.log
输出world
异步执行
也就是非同步执行的意思
正好和同步执行相反
不是一个接一个按顺序执行代码
代码编写的顺序
不能决定执行的顺序
我打个比方
我们要程序做两件事
第一 去下载一张1GB的图片
第二 下载完之后把图片显示出来
如果这个程序是按同步执行逻辑执行的话
当程序去下载1GB的图片
程序就会卡在这里 等待下载完1GB的图片
下载完之后才显示图片
同步执行超长任务会造成系统阻塞
导致后面的任务因为前面的一个超长任务浪费时间等待
如果程序是按异步执行的话
它首先会去下载1GB的图片
因为下载1GB的图片很耗时
也不知道什么时候能完成
所以程序决定不等待
把剩余的代码
就是显示图片的function放在Callback Queue里
然后执行下一个任务
如果后面有很多任务需要被执行的话
异步执行就不会造成系统大阻塞
这样的程序会让用户感觉反应更灵敏
当程序下载完那1GB的图片后
就会执行刚才被放在Callback Queue里的
“显示图片”function
这个举动就是回调
callback
而这个显示图片的function就是
callback function
回调函数
回调函数和常用标准函数是一样的
用来执行自定义的功能
如果你对函数不太了解的话
等一下可以观看这个视频
补一补函数的知识点
一般函数在我们定义后
会直接被调用
而回调函数我们则不会直接调用
我们会把回调函数作为一个参数
传递到另外一个函数里
然后该函数会根据某种事件的触发才执行回调函数
这就像我们给鼠标的onclick事件
设置事件处理程序 (Event Handler)
这个事件处理程序也是其中一种callback
这个callback只有在用户点击鼠标的时候才会被触发
你可以把callback function
想象成一个默默等着被召唤的仆人
就等你下达命令了
现在同学们知道了callback为什么叫callback
还有callback什么时候会被执行
接下来我会给你们演示同步执行的和异步执行的逻辑
实际操作一下这两种程序执行的方法
我们先切换到VS Code
好的，我们开始吧
同步执行很好理解
就是一行接一行的执行代码
我先输入两个console.log
第一个console.log用来显示hello
第二个console.log显示world
当我们运行这两行代码的时候
按我们对JavaScript的了解
它是先执行第一行
执行完第一行之后
再执行第二行
这个就不用多说了
看过前几集JavaScript教学的同学
都知道JavaScript源代码是怎么执行的
那现在我们来保存刷新看看效果
嗯，是的，程序一共输出两行字符串
第一个是hello
第二个是world
接下来给你们演示异步执行代码
是怎么执行回调函数 (callback function)
之前我们说过
为了不让那些很耗时的任务阻塞JavaScript的运行
我们都应该让这些耗时的任务被异步执行
那什么是阻塞的任务呢？
像刚才我们说到的 到第三方服务器下载图片
或者通过第三方API接口获取数据
只要JavaScript向第三方服务器发送请求
它就会牵涉到网络
网络的速度和稳定性是不可预测的
第三方服务器响应的速度也是不可预测的
所以所有的网络请求都有可能阻塞JavaScript的运行
导致后面的任务没办法快速被处理掉
直接影响JavaScript程序的灵敏度
接下来我会用setTimeout给你们演示异步执行
我会在一开始用console log打印1
中间部分延时三秒打印2
然后最后打印3
好的，先编写第一个console.log
接下来，我们要程序延时三秒才打印2
这里输入setTimeout
setTimeout function有两个参数
第一个参数是回调函数
第二个参数是等待的毫秒数
当指定的时间到了
就会执行回调函数
创建回调函数可以使用两种方法
第一种就是直接参数列表里编写
第二种方法就是在setTimeout以外创建回调函数
我先演示第一种方法
我们在第一个参数先定义一个空白的function
然后逗号，接着输入等待的时间
第二个参数是需要提供毫秒
之前我们说要等待3秒
所以这里我们需要先转换一下
1秒等于1000毫秒
3秒就等于3000毫秒
接着我们在函数体里输入console.log(2)
这样定义回调函数虽然比较直接
但我个人是不太建议在正式的代码里这样定义
如果回调函数的逻辑比较复杂
就不利于快速预览和理解代码
我们换另外一个方法
在第一个参数里输入函数名show2
你觉得哪一个比较直观呢？
我个人觉得这个会比较直观一点
这样我们就能很快的知道3秒后 回调show2函数
setTimeout是要回调show2函数的
现在我们来定义一下show2函数
function
show2
然后在函数体力输入console.log(2)
定义完show2
最后我们输入console.log(3)
好的，我们来保存刷新代码
在执行代码前
我先考考你们
你们猜猜console里会输出什么？
是1，2，3吗？
还是其他的？
有答案了吗？
那现在我们来执行看看答案
console里首先输出1和3
三秒后才输出2
所以答案是1，3，2
同学们猜对了吗？
猜对了给你点个赞！
猜错了也没关系
第一次学习callback十有八九对会猜错
所以没什么大不了
我们来看看这些代码是怎么被执行的
首先程序执行第一个console log
在console里输出1
接下来再执行setTimeout()
程序不会在这里默默等待
而是将show2回调函数放在Callback Queue里
然后执行下一行代码
程序接着执行console.log(3)
在console里输出3
过了三秒之后，setTimeout的等待时间已经完成
所以JavaScrip会t回调show2
执行里面的代码，console.log(2)，输出2
所以最终console里会显示1，3，2
我们再刷新一遍看看效果
嗯，是1，3，2
好的，现在我们来总结一下关于callback的分享
JavaScript程序的执行可分为
同步执行和异步执行
同步执行是先完成当前的任务才执行下一个任务
一个接一个有序的执行
异步执行
也叫非同步执行
和同步执行相反
不一定有序的执行任务
异步执行能同时执行多个任务
加快清空任务
异步执行能解决JavaScript阻塞的问题
异步执行需要配合
回调函数callback function一起使用
当异步执行任务完成后
会激活和执行callback function
callback
callback function
回调函数
回呼函数
是一个意思
callback不会被直接调用
它会作为一个参数被传递到另外一个函数里
然后在那个函数里被执行
好的，今天的分享就到这里
有疑问的话欢迎去到自学编程社区里提问
喜欢这个视频就拜托点赞分享吧
我们下期见，拜拜！
Comments
Post a Comment