46.尚硅谷_JS高级_事件循环模型.avi原创

好，后面呢，还有一个测试代码，其实是后面的就比较好懂了，好重点说到这里来了。好，我把这个页面呢先打开。诶，这个怎么还还有代码吗？哦，前面的是吧，嗯，好，这里面呢，我们主要是要去说到一个它的一个事件循环模型，在这个模型里面呢，就有一个这个东西，来看一下它里面有一个原理图。啊，这个我们就真正去说明我们刚才说的那些东西，它背后到底是怎么运转的。啊，到底是怎么运转的啊，看看这个图啊，我们来先简单的跟大家说一说，这个图里面呢，一共是几个部分大的。大体是不是三个部分，人们看到三个部分，那么首先是这个。是吧，这个是这一部分是吧，接就是这一部分。

能看到吧，好来先看左边的，左边的这个咱认识step是不是，呃，Help是什么，对对里面是什么，是不是一个一个的对象，能不懂啊，而这个里面放什么主变量，其实这个叫调用站啊，其实它里面是不是放的，哎，这个里面是怎么怎么去区分，怎么去看它了，OK，我们说过我们有一个概念叫执行上下文，还记得不啊，执行上下文我们说是不是执行上下文对象啊，而且我还跟大家说过，它其实不是一个真的对象。啊，它是一个抽象的对象，是一个虚拟的对象，它实际上可以看成是我们账里面的一个一个区域，它里面包含了很多局部变量，能不能懂啊，这一个最里最下面的这一个是谁啊，其实你就可以把它看成谁了，Window。

啊，接着就是我们是不是有可能在里面是不是调用函数啊。好，我问大家，如果产生这种情况是一个是同时同一个时刻，如果这样的情况是一个什么情况，是不是嵌套调用啊？如果同一个时刻是这样情况，是不是肯定必然是嵌套调用，能懂不？因为要不是嵌套调用的话，一个函数执行完是不是才可能执行第二个函数，那第二个函数执行的时候，第一个函数是不是已经释放了？能理解不能理解好，那这个里面啊，这个里面代表的是我们初始化代码的执行，初始化代码的执行。能不能理解在初始化代码之前，里面有一些特别的代码，我们刚才说过有两个特别代码，哪两个？启动定时器。

还有一个什么绑定事件监听，绑定世界监听本身是什么代码。是初始化代码还是回调代码？初始化代码？对吧，啊好了，但是但是这个地方就说举个例子，我们启动了定时器set out。我们启动定时器，实际上做了个什么事情呢？我们说是不是开始计时啊，谁来开始计时了？你即时是在主线上做的吗？那肯定不能，它其实我set time out是将我的回调函数以及我那个时间假设是1000，假设是1000，将这两个数据去交给有一个东西啊，这个里面这个代表的是谁呢？代表的就是我的定时器管理模块，代表的是我的定时器的管理拈。

啊，还有一个我们是不是也可能去绑定事界监听安，有没有可能有，那此时实际上做了一个什么事情呢？就将我的回调函数，啊将我的回调函数交给谁呢？交给他，它实际上就相当于我们的do事件的什么呢？管理模块，他们是在哪个线程执行，在分线程执行。那你说他是我们的GS引擎执行的吗？不是，我们前面说过引擎是在哪个线上执行。主线程这一个是由浏览器来负责的，能不能懂能理解吧，浏览器他们的这些模块来负责的，并不是GS引擎来去管理的，来去执行的啊，OK，好，以定时器为例，定时器无非就是这个意思，定时器说的意思就是到了假设我指定的是1000毫秒，那也就是说到了1000毫秒我的那个。

回调函数是不是要执行了，但是我们刚才说过是1000万毫秒就肯定执行吗？不一定，那什么时候不一定呢？是吧？什么时候不一定呢？那就要看过程了，我跟大家说一下，过程很简单，我们的定时器管理模块，它是真正定时的。他不会出问题，他不会出问题，他做的事情是很什么，就到了时间点，他就将回调函数放到这个里面来，这是一个什么东西呢？我们来看一下，这个叫什么扩败QQ，什么队列的意思，说白了队列不就是容器吗？是吧，那到了这个时间点，他就把回调函数放到这个里面来。能不能理解包，包括我们的按钮是不是一点是不是就调用啊，它实际上也有过程了，也有过程，当我点击的时候，我的这个事件管理模块就会将什么呢？将这个回调函数放到这个里面来。

那放进来了就代表他执行了吗？这个叫待执行。能不懂待执行，那你说我的那个定时器的回调函数什么时候会被延迟执行呢？前面我在执行谁？我是不是在执行初始的代码，初始化代码有不可能执行很长时间，有没有有假设我执行1200毫秒。也不可能，那我必须把这1200号码画完了以后，是不是才有机会去执行这个里面的回调函数，关键点就在这里。

必须保证我的初始化代码执行完以后，它才会去有一个概念叫一录录什么循环，说白了，我这一个回调队列里面是不是有可能会有好几个待处理的回调函数，有没有可能？有吧，有可能有多个待处理的回调函数。啊，但但是呢，他也得是不是把上面的初始化代码执行完，拆一个拿出去执行，执行完了以后再把下一个拿出来执行，咱们看到。刚刚我问过了，他们俩能同时执行吗？不能，为什么不能啊，单线程吗？他不都在主线程执行吗？一个县城是不是同一个时刻只能干一件事情，那我只有把这个一个事情干完了，是不是干下一个事？

这个里面比较关键的地方啊，就是有个前提啊，我跟大家说，先一定要把代码分好类，一个叫初始化代码，这个其实非常关键的一个叫什么回调代码啊OK，初始化代码执行完了以后，才有可能执行什么毁掉代码。OK，那回调代码怎么让它执行起来的？那首先我们的初始化代码里面有可能是不是去把一些毁掉函数交给这个管理模块去管理。但在特定的时间，或者在事件发生的时候，是不是将回调函数是不是放到这个队列里面去？当我们的初始化代码执行完了以后，才去循环便利队列里面的这个回调函数执行，其实就这么个套路。

好，说完这个套路以后呢，我们把这个给它写一写，就这个非常简单啊，来我这里面有一个有一个按钮啊，我给这个按钮呢，加一个监听啊，代码都非常简单，就是演示性的代码，说白了就是点DBT，点什么on，等于一个function，好我这里面呢，就点log呗，打印输出，呃，点击了什么发可以吧，可以好我前面譬如说我有一个有一个方有一个FA1，好了，我在里面打印输出啊FA1这都是什么代码，是不是我这个地方初始化代码包含这个是不是也是初始化代码也是啊，包括我去设out这条语句，什么代码，初始化代码。

啊，假设来是2000，接着呢就是啊定时器执行了可以吧，好接着呢，我在下面再来一个方写，再来一个FN2啊，再写一个打印输出，再来一个F2。好，接着我在这里面调用FN啊可以吧，现在问一下打印的顺序是什么。先是打印输出一，接着打印输出F，那接着了下面两个了，那就不好说了，因为这一个是基本上应该定十了吧，对吧，但是这一个得看你什么时候点，是不是能不能懂，你说他们俩先后得看你点的早还是什么点的晚来看一下呗，这个比较简单啊，你前面都说过了。

刷一下拉，看到完这两个出来了，大概我在一点，是不是这样呢？靠后啊好，这个顺序是不是可以交换了，但他们俩顺序能交换吗？它们俩F1F2肯定是最先执行的，对不对？好来试一下再说一下啊说啊点。能懂吧，啊，这个是比较好懂吧，嗯。啊，在我们整个事件模型里面重要两个部分，一个是什么呢？事件管理模块啊，这个事件保理模块包含包含什么呢？定时器管理模块对吧，还有一个什么多姆世界管理模块，能理解吧？啊主要质量其实还有个价值啊，但只是只是我们还没去讲这个东西，所以呢，大家先把它放着对吧，道理是一样的啊再一个很重要的东西就什么。

回调对念，你说我要没有回调对念能实现这个效果，那不能，因为它是不是起了一个缓存作用啊，它是不是存了一些我们待处理的回流函数，我要没有这个容器，我要到了时间点，你要就立即执行，要丢弃。对不对，要没有这个容器结构的话，你想啊，我到了1000毫秒了，我这一个回调函数该执行了是吧，那你现在一定能得到执行码，不一定他是不是有可能再干别，那你说我该怎么办，没办法了，是不是我我不我不然的话我就把它丢起来，有这个容器结构就不一样了。它这里存的，我一直跟他强调是一个待处理的回流函数，能不能理解待处理并不是马上处理吧，并不一定是马上处理。

这个应该要知道。行在这个里面呢，还有一些概念啊，挺多的啊，一看着就觉得感觉非常难，其实也并不难啊，在有一个东西呢，叫执行站啊，Excu stack，就所有的代码呢，都是在这个空间里面，现说白了就它能看懂吧啊接着就是浏览器内核啊，前面已经说过了，没什么是吧？浏览器内核里面是所有的模块都在主线执行吗？不是有的模块是在主线执行，有的模块是什么分线在执行的啊是这里面还有个图，这个图呢。这个图给它删了吧，大家别看了吧，啪，哎，我错了，应该应该不保存的，就是这里面呢，主要图片比较多，所以保存的时候比较慢，下面还有一个啊，还有几个概念，什么任务队列，什么消息队列，什么事件队列，还有这个叫什么后半什么意思。

回调对面其实都是指的同一个。是同一个东西啊，取了不同的名称而已。那不懂啊，OK，这些都有一些英文单词啊，什么message q啊，什么has，什么even q，其实就对应我们的什么呢？或败可有毁掉的念，其实同一个概念，好，下面有个概念叫世界轮询。指的谁呀，哪个操作就这个。能懂吧，也就是说他把初始化代码执行完了以后，是不是得循环便利，这个里面所有的回收代码执行要不要要那实际上就是我们的这个英文单词叫英文的什么路，就循环遍历嘛，从任务队列中循环取出回调函数啊，放入到运行站里面去处理，这这里面说了一个一个什么接一个执行。

啊，也就是说我要问大家，一旦我没有啊，我不是第一位，一旦我这个不是一位，肯定会被延迟一点，对不对，能不懂肯定会被延迟一点嘛，如果我不是第一位的话，我是不是后面的，那后面的是不是先要把前面的执行完才能执行后面的。好，还有一个叫事件驱动模型，这个系统驱动模型就是整个图，这整个就是一个事件驱动模型的一个图。OK啊，最后有一个请求响应的模型啊，这个呢，大家稍微一了解，因为我还没有找后台的一些东西，什么意思呢？我们有一个浏览器是吧？浏览器用来干嘛的？首先它是不是可以发请求，发请求发给谁，有个概念叫服务器吧，服务器用来干嘛呢？服务器接收请求干嘛呢？接收到请求以后，有个概念叫处理请求。

有不懂，处理完请求要接着干嘛，返回一个什么响应数据对不对，那我的浏览器还干什么事情，接收什么东西响应数据，接收完响应数据以后呢，是不是有可能要展示，你想啊，我去访问最终是不是看到一个网页了呀，那个网页是不是服务器返回的，那服务器返回浏览器是不是要接收这个返回啊，这整个实际上就是一个请求响应的一个模型。

啊，OK，这个过程大家应该要懂啊，这个其实有生活体验就应该差不多了。发请求啊，浏览器再把这个过程说一遍啊，浏览器发一个请求过去，服务器接收到请求，下一步处理请求得到一个数据，我最终是不是返回一个响应数据，返回一个响应数据接到谁接收了浏览器，浏览器接收到响应数据以后，是不是把它展现出来，是怎么回事？啊，这整个就是一个请求响应的模型啊。OK，这个执行流程刚才已经说过了，我反复跟大家说过了，就不再去写啊，嗯，行，OK，这个里面这个里面呢，讲了这么多，这里面这里面是重要啊，如果是面试的时候问的这个东西，大家最好是能画图说明。

你觉得这个图很难画吗？这个图比我们前面画的那个那个几个图了简单多了，一共就这几个部分是吧？啊，上下两句话就搞定了啊，我相信你，你行啊。