JavaScript同步与异步

2022-10-31 10:38:24

在这里插入图片描述

JavaScript的运行机制

运行栈

JavaScript的执行环境是单线程 的,所谓单线程,就是每次都只能做一件事,后面的事必须等前面的执行完才可以进行。

console.log(1);
console.log(2);
console.log(3);
console.log(4);// 1, 2, 3, 4

但是这有一个弊端,如果中途遇到某个操作长时间无法执行完成,那么后面的任务就必须排队等待,这严重影响了整个执行过程,会导致浏览器无响应。

为了解决这个问题,JavaScript将任务分为了同步异步 两种。

我们写的代码一般都是同步代码,如:console.log,变量赋值,for循环等。

哪些是异步操作?

  • 定时器:setTimeout、setInterval
  • 事件绑定
  • ajax请求数据一般是异步操作,当然也可以同步
  • promise
  • saync await
  • 读写文件

当遇到异步任务时,会将异步任务放到任务队列中,等到整个运行栈中的内容执行完后再去执行任务队列中的内容。

console.log(1);newPromise((resolve)=>{resolve();}).then(()=>{
  console.log(3);})setTimeout(()=>{
  console.log(2);},0);

console.log(4);// 1, 4, 3, 2
  1. 上面的代码中,首先输出1。

  2. 然后遇到promise, promise是一个异步操作,会将.then 中的内容放到任务队列 中。

  3. setTimeout 也是一个异步操作, 虽然这里延迟时间是0毫秒,但是并不会马上执行。

  4. 然后继续执行输出4。

  5. 整个运行栈结束后,去执行任务队列中的任务,首先输出 3, 再输出 2

任务队列

上面我们知道了任务队列 中存放的都是异步任务,他们按照放入的顺序进行排列,但是异步任务会被分为了两大类:

  • 微任务:promise.then()、async await
  • 宏任务:setTimeout、setInterval、事件绑定、ajax、读写文件

微任务宏任务 之前执行,即使微任务宏任务 之后才被加入到任务队列中。

还是上面的例子,我们把setTimeoutPromise 的顺序进行调整:

console.log(1);setTimeout(()=>{
  console.log(2);},0);newPromise((resolve)=>{resolve();}).then(()=>{
  console.log(3);})

console.log(4);// 1, 4, 3, 2

可以得到一样的结果,说明Promise.then()setTimeout 之前执行了。

事件轮询

上面说到,同步任务执行完成后,会去执行异步任务,那如果异步任务执行完成后,是不是整个过程就结束了?

当然不是,在执行异步任务时,异步任务中的代码同样可能包含新的同步任务与异步任务,过程还是一样的,按照顺序执行,遇到异步任务,会将异步任务放入到一个新的任务队列 中。当任务队列中的所有任务执行完成后,又会重新去执行新的任务队列 中的内容,即使任务队列 中没有任务任务,这个过程也会无线的循环下去,这就是事件轮询

console.log(1);setTimeout(()=>{
  console.log(2);},100);newPromise((resolve)=>{resolve();}).then(()=>{
  console.log(3);newPromise((resolve)=>{
    console.log(4);resolve();}).then(()=>{
    console.log(5);})})

console.log(6);// 1,6, 3,4,5,2

setImmediate与process.nextTick

setImmediateprocess.nextTick 也是异步任务,为什么要单独把这个两个拿出来说呢,他们比较特殊,首先要知道一点,setImmediate 是宏任务,process.nextTick 是微任务(在node环境下才有)。

process.nextTick 会在所有的微任务之前执行,setImmediate 会在所有的宏任务最后执行。换句话说,process.nextTick 在所有异步任务前执行,setImmediate 在所有异步任务最后执行,

整个JavaScript的执行过程:

  • 同步任务
  • process.nextTick
  • 微任务:promise、async await
  • 宏任务:setTimeout、setInterval、事件绑定、ajax、读写文件
  • setImmediate

setTimeout与 setInterval

这两个定时器我们经常会用到,setTimeout 用来延迟一定的时间后执行某些事情,setInterval 用来定时执行某些内容。

你有没有想过,定时器的时间是准的吗?

我们可以写个demo来验证一下:

for(let index=0; index<10000; index++){
  console.log('hello');}setTimeout(()=>{
  console.log('word');},5);

先循环输出10000次hello,然后5毫秒后输出word。输出 10000次的hello 再怎么也需要几十毫秒,那word 是会插入到 1000 次的hello 中输出呢还是在最后输出。结果是最后输出。

在这里插入图片描述

可能会有人提出了质疑,上面说过,JavaScript是单线程的,必须等上面的任务执行完成后才会执行下一个任务,在输出1000次hello 结束前,根本还没有执行到setTimeout ,也就是说还没有开始设置定时器,肯定会在最后才输出word

改一下代码:

for(let index=0; index<10000; index++){newPromise((resolve)=>{resolve();}).then(()=>{ 
    console.log('hello');})}
console.log('你好');setTimeout(()=>{
  console.log('word');},0);// 你好// hello....// hello// word

输出结果在意料之中,来分析一下:

  • for循环10000次,发现了10000个Promise.then() 异步任务,将其依次放入到任务队列中
  • 同步输出你好
  • 发现异步任务setTimeout ,加入到任务队列中 。(重点来了,这里已经开始了定时器
  • 执行任务队列 中的任务,输出10000次hello ,然后输出word

通过上面的例子可以明确的得到结论:setTimeout 的定时是不准的。

那么setInterval 呢?

当然也是不准的,他们的原理是这样的,在任务队列中,每当遇到setTimeoutsetInterval 时,会对当前时间与设置的时间做一个比较,如果未达到设定的阈值,则会将其放入到下一个任务队列中,如果达到了,则执行里面的内容,一直这样无限循环下去。

promise与async await

他们都是异步操作,先来说promise

promise

第一点promise 中的内容的同步的,promise.then() 中的内容才是异步的。

newPromise(()=>{
  console.log(1);}).then(()=>{
  console.log(2);})

console.log(3);// 1, 3

上面的代码执行后1在3的前面输出。

第二点:只有调用了resolve() 方法后才会将promise.then() 中的内容加到任务队列中。

因此上面的代码并没有输出2,resolve() 中可以传入一个参数,该参数可以在.then() 中拿到。

newPromise((resolve)=>{
  console.log(1);resolve(2);}).then((data)=>{
  console.log(data);})

console.log(3);// 1, 3, 2

async await

第一点:async函数返回的是一个promise 对象

asyncfunctionfun(){await'hello';}
console.log(fun());// Promise { <pending> }

第二点await 后面的内容是异步任务,会阻塞后面代码的执行,当await 的异步任务执行完成后,才会继续向下执行。

asyncfunctionfun(){  
	console.log(1);awaitnewPromise((resolve)=>{    
		console.log(2);resolve();}).then(()=>{    
		console.log(3);})  
	console.log(4);}// 1// 2// 3// 4

第三点async 函数中的return 后面的内容,并不是函数的返回值,

asyncfunctionfun(){  
	console.log(1);return2;}const fn=fun();
console.log(fn);// 1// Promise { 2 }

第一点已经说到了,async 函数返回的是一个promise 对象,而return 后面的内容就相当于promise.then() 中的内容。

asyncfunctionfun(){  
	console.log(1);return2;}const fn=fun();
fn.then((data)=>{  
	console.log(data);})// 1// 2

如果将上面的例子改为同步函数,可以这样写:

functionfun(){returnnewPromise((resolve)=>{    
		console.log(1);resolve(2);}).then((data)=>{    
		console.log(data);})}fun();// 1// 2

通过对比可以发现,async 可以将promise 简化。常用于异步请求数据,如果异步请求比较多的话,使用async 可以大大提高代码的可读性,避免了多层嵌套。

asyncfunctionfun(){const data=awaitnewPromise((resolve)=>{resolve({      
			name:'张三',      
			age:18})}).then((res)=>{return res;});  
	console.log(data);}fun();// { name: '张三', age: 18 }

JavaScript的编译与执行

console.log(a);// Uncaught ReferenceError: a is not defined

如果直接输出一个未定义的变量,则会报错:a is not defined

console.log(a);var a=1;console.log(a);// undefined// 1

如果在输出语句的后面定义呢,为什么就不会报错了,而是undefined,上面不是一直说JavaScript 是从上至下按照运行栈依次执行吗。

JavaScript 代码在运行时会经历两个阶段:编译执行,编译阶段往往在执行阶段的前几微秒甚至更短的时间内。

在编译的过程中有一个变量提升函数提升 的概念,在编译的过程中,先将标识符和函数声明给提升到其对应的作用域的顶端。

因此上面的例子中,第一个输出a时,是已经定义了的,但是还并没有执行赋值操作。第二个输出才会得到结果1。

函数提升

函数提升也是同样的道理,在编写代码时,我们可以在定义的函数上方使用函数。

fn();functionfn(){  
	console.log(1);}// 1

上面的那句话其实并不严谨,有两种生命函数的方式:函数式声明表达式声明

如果是表达式声明 的方式,只会提升声明,而不会提升函数表达式,本质上就是变量提升

fn();varfn=function(){  
	console.log(1);}// fn is not a function

下载此文到本地:https://www.dengzhanyong.com/article/260

  • 作者:馒头老爸
  • 原文链接:https://blog.csdn.net/DengZY926/article/details/119545447
    更新时间:2022-10-31 10:38:24