异步和单线程

导学题目

• 同步和异步的区别是什么？

• 手写用 Promise 加载一张图片

• 前端使用异步的场景有哪些？

• // setTimeout笔试题 输出顺序
  console.log(1);
  setTimeout(function () {
     console.log(2);
  }, 1000)
  console.log(3);
  setTimeout(function () {
     console.log(4)
  }, 0)
  console.log(5);

知识点

• 单线程和异步

• 应用场景

• callback hell 和 Promise

应用场景

• 网络请求，如 ajax 图片加载；

// ajax
console.log('start');
$.get('.data1.json', function (data1) {
    console.log(data1);
});
console.log('end');

// 图片加载
console.log('start');
let img = document.createElement('img');
img.onload = function() {
    console.log('loaded');
}
img.src = '/***.png';
console.log('end');

• 定时任务，如 setTimeout；

单线程和异步

• JS是单线程语言，只能同时做一件事儿；

• 浏览器和 node.js 已支持 JS 启动进程，如 Web Worker；

• JS 和 DOM 渲染共用同一个线程，因为 JS 可修改 DOM 结构；

• 遇到等待（网络请求、定时任务）不能卡住，需要异步；

• 异步是基于回调 callback 函数形式

例：

// 异步
console.log(100);
setTimeout(function () {
    console.log(200);
}, 1000);
console.log(300);
​
// 同步
console.log(100);
alert(200);
console.log(300);

• 基于 JS 是单线程语言；

• 异步不会阻塞代码执行；

• 同步会阻塞代码执行；