JavaScript中的同步异步问题
当我们去想到JS中的同步异步问题的时候，我们就必须要知道JS的执行机制
那么JS是什么执行机制呢
JS是单线程的执行机制
JS是单线程
什么是单线程呢？
JS语言的一大特点就是单线程，也就是说，同一个时间只能做一件事
这是因为JS这门脚本语言诞生的使命所致——JS是为处理页面中用户的交互，以及操作DOM而诞生的，比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应先进行添加之后再删除
单线程就意味着：所有任务需要排队，前一个任务结束，才会执行下一个任务，这样会导致一个问题：如果JS执行时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉
同步和异步
我们知道了JS单线程机制的缺点，所以为了解决这个问题，利用多核CPU的计算能力，HTML5提出了WebWorker标准，允许JS脚本创建多个线程，于是，JS中出现了同步和异步
同步：前一个任务结束后再执行下一个任务
异步：在做一件事的同时，还可以做别的
形象点地拿做菜做比喻说：
同步 :我们要烧水煮饭，等水开了（10min之后），再去切菜，炒菜
异步 ：我们在烧水的同时，利用这10min，去切菜，炒菜
本质区别 ：这条流水栈上各个流程的执行顺序不同
同步任务都是在主线程上执行，形成一个执行栈
异步任务是通过回调函数执行的
一般而言，异步任务有以下三种类型
- 普通事件：如click，resize等
- 资源加载：如load，error等
- 定时器：包括setInterval，setTimeout等
异步任务相关的回调函数添加到任务队列中（也称作消息队列）
JS的执行机制
- 先执行执行栈中的同步任务
- 异步任务放入任务队列中
- 一旦执行栈中的所有同步任务执行完毕，系统就会依次读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
以下代码的结果是什么
console.log(1);
setTimeout(function () {
console.log(3);
}, 0);
console.log(2);
//1 2 3
思考一下下面这个代码
console.log(1);
document.onclick = function() {
console.log('click');
}
setTimeout(function() {
console.log(3)
}, 3000)
console.log(2);
由于主线程不断地重复获得任务，执行任务，再获取任务，再执行，所以这种机制背称作 事件循环
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79724.html
