js面试题之异步问题的深入理解

 更新时间:2020年09月20日 09:39:27   作者:新西伯利亚狼  
这篇文章主要给大家介绍了关于js面试题之异步问题的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

js中的宏任务与微任务

在面试过程中,基本面试官都会问你一些promise的问题,promise是es6的新内容,主要是用来优化异步的问题。笔试中经常会让你写一些promise和setTimeout的执行结果,这你就必须知道宏任务和微任务的概念了!

为什么要使用promise

如果你经历过以前的jquery开发项目,你会遇到以下问题:回调地狱

$.ajax({
	...
	success: function() {
		...
		$.ajax({
			...
			success: function() {
				
			}
		})
		...
	}
})

原因分析:

ajax请求嵌套,原因是我第二个请求依赖的参数在第一个请求的结果中,所以就得这么一直嵌套下去,ajax是异步的,不能再外面拿到里面的结果。这种代码导致的问题就是调试困难,耦合性非常高,后期改动一个地方就头疼!维护非常困难,代码可读性差。

于是乎就引入了promise对ajax进行了优化,axios就是基于promise的一个请求封装库,他们底层都是基于js原生的XMLHTTPREQUEST.

promise().then().catch()链式调用,多个请求可以promise().then().then()。

何为宏任务,何为微任务?

思考这个问题时你必须知道javascript是一种单线程的脚本语言,也就是它的代码正常只能从上往下依次执行,一次只能做一件事,异步是通过回调函数来实现的。为何不把js设计成多线程的语言呢?语言的用途决定了它的特性,js最初是用来做表单验证以及正则判断的,和操作DOM元素的。如果js有多个线程,一个执行DOM元素修改,另一个执行删除,那浏览器直接懵逼了,我到底该干啥???所以语言的用途决定了他的特性,但是浏览器是多线程的,除了主线程还有其他线程。

当js主程序执行时,先运行主程序上的同步代码,遇到setTimeout或setInterval就把它放入宏队列中,遇到promise的回调就把它放到微队列中,程序执行先执行主程序代码,再执行nextTick代码,然后微任务,最后宏任务,任务队列中的依次排队执行,async和await是配套使用的,await后面接一个promise对象,来看看下面这段代码:

 setTimeout(function(){console.log(1)},0); // 进入宏任务队列,最后执行宏任务
 new Promise(function(resolve,reject){
   console.log(2); //这句代码在promise构造器,同步执行
   resolve(); // 执行了resolve再把任务放入微队列
 }).then(function(){console.log(3)
 }).then(function(){console.log(4)});
 process.nextTick(function(){console.log(5)});
 console.log(6); // 主程序代码
 // 输出2,6,5,3,4,1
 
// 下面这个进阶代码
setTimeout(function(){console.log(1)},0); // 进入宏任务排序为1
new Promise(function(resolve,reject){
   console.log(2);
   // promise中执行完resolve()才会执行then(),而这里的resolve在宏任务里,执行完主程序代码后,还得先执行先进入宏队列中的程序
   setTimeout(function(){resolve()},0) // 进入宏任务排序为2
 }).then(function(){console.log(3)
 }).then(function(){console.log(4)});
 process.nextTick(function(){console.log(5)});
 console.log(6);
 // 输出的是 2 6 5 1 3 4

再看async and await中的执行顺序

代码如下(示例):

async function async1() {
  console.log(1); 
  await async2();
  console.log(2); //这里要等await执行成功才会执行,进入微任务,排序1
}
async function async2() {
  console.log(3);
}
console.log(4); //主程序代码
setTimeout(function() {
  console.log(5);
}, 0) //进入宏任务,最后执行
async1();
new Promise(function(resolve) {
  console.log(6); // 这句同步执行
  resolve(); 
}).then(function() {
  console.log(7); //进入微任务,排序2
});
console.log(8); // 主程序代码
// 输出的是 4,1,3,6,8,2,7,5

总结

js是单线程语言,它的用途决定了他的特性,异步操作通过事件循环机制,先执行同步代码,然后微任务,最后宏任务,两个任务队列里的任务排队依次执行。await后面的代码必须等待promise返回结果再执行下面代码,await和async是generator函数的语法糖。

到此这篇关于js面试题之异步问题的文章就介绍到这了,更多相关js面试题之异步内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript使用键盘输入控制实现数字验证功能

    JavaScript使用键盘输入控制实现数字验证功能

    根据键盘输入的keycode来判断输入的是什么类型来实现数字验证功能,就简单几行代码就可以实现,对js数字验证功能感兴趣的朋友一起看下吧
    2016-08-08
  • js实现json数组分组合并操作示例

    js实现json数组分组合并操作示例

    这篇文章主要介绍了js实现json数组分组合并操作,涉及javascript针对json数组的遍历、判断、添加、赋值等相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • javascript实现的多个层切换效果通用函数实例

    javascript实现的多个层切换效果通用函数实例

    这篇文章主要介绍了javascript实现的多个层切换效果通用函数,涉及javascript针对页面元素样式的遍历与操作技巧,需要的朋友可以参考下
    2015-07-07
  • JS+HTML+CSS实现轮播效果

    JS+HTML+CSS实现轮播效果

    这篇文章主要为大家详细介绍了JS+HTML+CSS实现轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • javascript 原型与原型链的理解及应用实例分析

    javascript 原型与原型链的理解及应用实例分析

    这篇文章主要介绍了javascript 原型与原型链的理解及应用,结合实例形式分析了javascript原型与原型链的具体原理、功能、使用方法及操作注意事项,需要的朋友可以参考下
    2020-02-02
  • JS+CSS实现滑动切换tab菜单效果

    JS+CSS实现滑动切换tab菜单效果

    这篇文章主要介绍了JS+CSS实现滑动切换tab菜单效果,涉及javascript鼠标事件及页面元素样式的动态切换效果实现技巧,需要的朋友可以参考下
    2015-08-08
  • jQuery AJAX回调函数this指向问题

    jQuery AJAX回调函数this指向问题

    了解JavaScript的人都知道JavaScript的this不总是指向当前对象,函数或类中的this指向与调用这个函数的对象以及上下文环境是息息相关的。
    2010-02-02
  • js、css、img等浏览器缓存问题的2种解决方案

    js、css、img等浏览器缓存问题的2种解决方案

    浏览器缓存的意义在于提高了执行效率,但是也随之而来带来了一些问题,导致服务端修改了js、css,客户端不能更新,下面有几个不错的方法可以解决此问题,感兴趣的朋友可以参考下
    2013-10-10
  • JavaScript中call,apply,bind的区别与实现

    JavaScript中call,apply,bind的区别与实现

    这篇文章主要介绍了JavaScript中call,apply,bind的区别与实现,文章通过围绕主题思想展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • 监控用户是否关闭浏览器的js代码

    监控用户是否关闭浏览器的js代码

    BS系统一个非常烦人的地方是不知道用户什么时候关闭浏览器离开系统.这里,我们采用onbeforeunload参数监控用户是否关闭浏览器.
    2009-08-08

最新评论