JavaScript执行顺序Event Loop

javascript是一门单线程语言,为了实现主线程的不阻塞,但可以用Event Loop模拟多线程操作

Event Loop中同步异步任务执行顺序:

  • 所有异步任务都是在Event Table中注册函数,当指定的时间完成时,Event Table会将函数放入Event Queue,主线程的同步任务执行完会去Event Queue读取对应函数,进入主线程执行。

js引擎monitoring process进程,当发现主进程执行栈为空,会去执行Event Queue中的函数

let data = [];
$.ajax({
    url:url
    data:data,
    success:() => {
        console.log(‘发送成功!‘);
    }
})
console.log(‘代码执行结束‘);

上面是ajax执行顺序:

ajax进入Event Table,注册回调函数success。

执行console.log(‘代码执行结束‘)。

ajax事件完成,回调函数success进入Event Queue。

主线程从Event Queue读取回调函数success并执行。

除了广义的同步任务和异步任务,我们对任务有更精细的定义:

macro-task(宏任务)::setTimeout、setInterval、setImmediate、I/O、UI交互事件

micro-task(微任务):Promise、process.nextTick、MutaionObserver

console.log(‘1‘);

setTimeout(function() {
    console.log(‘2‘);
    process.nextTick(function() {
        console.log(‘3‘);
    })
    new Promise(function(resolve) {
        console.log(‘4‘);
        resolve();
    }).then(function() {
        console.log(‘5‘)
    })
})
process.nextTick(function() {
    console.log(‘6‘);
})
new Promise(function(resolve) {
    console.log(‘7‘);
    resolve();
}).then(function() {
    console.log(‘8‘)
})

setTimeout(function() {
    console.log(‘9‘);
    process.nextTick(function() {
        console.log(‘10‘);
    })
    new Promise(function(resolve) {
        console.log(‘11‘);
        resolve();
    }).then(function() {
        console.log(‘12‘)
    })
})

整段代码,共进行了三次事件循环,完整的输出为1,7,6,8,2,4,3,5,9,11,10,12。

(请注意,node环境下的事件监听依赖libuv与前端环境不完全相同,输出顺序可能会有误差)

原文地址:https://www.cnblogs.com/kanhai/p/8732425.html

时间: 2024-11-05 19:30:14

JavaScript执行顺序Event Loop的相关文章

JavaScript执行顺序详细介绍

JavaScript执行顺序详细介绍 作者: 字体:[增加 减小] 类型:转载 时间:2013-12-04我要评论 这篇文章主要介绍了JavaScript执行顺序,有需要的朋友可以参考一下 之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥是因为它属于底层行为,那么JavaScript代码执行顺序就比较形象了,因为我们可以直观感觉到这种执行顺序,当

JavaScript执行顺序详解

这篇文章主要介绍了JavaScript执行顺序,有需要的朋友可以参考一下 之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥是因为它属于底层行为,那么JavaScript代码执行顺序就比较形象了,因为我们可以直观感觉到这种执行顺序,当然JavaScript代码的执行顺序是比较复杂的,所以在深入JavaScript语言之前也有必要对其进行剖析.1.1

javascript的执行机制—Event Loop

既然今天要谈的是javascript的事件循环机制,要理解事件循环,首先要知道事件循环是什么. 我们先从一个例子来看一下javascript的执行顺序. <script> setTimeout(function() { console.log('定时器开始了.'); },0) new Promise(function(resolve) { console.log('马上执行for循环了'); for (let i = 0; i < 10000; i++) { i == 99 &&

深入理解Javascript单线程谈Event Loop

假如面试回答js的运行机制时,你可能说出这么一段话:"Javascript的事件分同步任务和异步任务,遇到同步任务就放在执行栈中执行,而碰到异步任务就放到任务队列之中,等到执行栈执行完毕之后再去执行任务队列之中的事件."但你能说出背后的原因吗? 1.线程与进程 进程:是系统资源分配和调度的单元.一个运行着的程序就对应了一个进程.一个进程包括了运行中的程序和程序所使用到的内存和系统资源. 线程:线程是进程下的执行者,一个进程至少会开启一个线程(主线程),也可以开启多个线程. 2.同步和异

从Javascript单线程谈Event Loop

假如面试回答js的运行机制时,你可能说出这么一段话:"Javascript的事件分同步任务和异步任务,遇到同步任务就放在执行栈中执行,而碰到异步任务就放到任务队列之中,等到执行栈执行完毕之后再去执行任务队列之中的事件."但你能说出背后的原因吗? 先理解相关概念 线程与进程 进程:是系统资源分配和调度的单元.一个运行着的程序就对应了一个进程.一个进程包括了运行中的程序和程序所使用到的内存和系统资源. 线程:线程是进程下的执行者,一个进程至少会开启一个线程(主线程),也可以开启多个线程.

[Javascript] Task queue &amp; Event loop.

Javascript with Chorme v8 engine works like this : For Chorme engine, v8, it has call stack. And all the async opreations functions are stay in webapis. So everytime  you call 'setTimeout()' or http call, it will always call webapis. So, in the pictu

javascript执行顺序小结

作为web开发人员,一定要对js的执行顺序,解析原理有一定了解,否则无法掌控这门小巧好用的语言 javascript是一门实现网页动态效果的语言,也是主要负责和服务端的交互,他抛弃了像java中类的束缚,将数据结构简化,利用typeof运算符得到的只有number,string,boolean,underfined,null,function,object,回归简单,接下来就说一下js的执行顺序 js是按块(代码块)执行的 1>.浏览器在解析html时会解析js,就像是先把js下载到浏览器内存中

javascript执行顺序

默认情况下,浏览器是从上往下解析html代码,从外面引入的文件也不会修改此顺序 当解析到script则会调用js解析器,通常解析器是先预编译,再解析执行,解析器对变量和函数的声明进行了预编译,变量只进行了声明和初始化的操作,赋值只在解析的时候执行 hello();//这里会报错,hello is not function var hello=function(){ console.log("111"); } function hello() { alert("1111&quo

Web:javascript执行顺序

<html> <head> <script> ...这里的程序,首先执行 function fun()//这个函数在body标签构造之前,实例化,但里面程序不会自动执行 { 构造了body里的标签之后,在事件发生时执行 } wiondow.onload=function() { 构造了body里的标签之后,马上执行该段程序,不需要任何程序去调用 } </script> </head> <body> <div onclick=&q