JS 面试知识学习历程（第四天） -- 异步和单线程

Chapter4 JS基础知识（下1）– 异步和单线程

这是我自己的学习过程总结，如果有什么写的不清楚的地方，欢迎大家交流、批评、提问。可以在这里评论，也可以在github上提问，谢谢大家

题目

• 同步和异步的区别是什么？分别举一个同步和异步的例子
• 一个关于setTimeout的笔试题
• 前端使用异步的场景有哪些

知识点

• 什么是异步（对比同步）
• 前端使用异步的场景
• 异步和单线程

什么是异步

console.log(100)
setTimeout(function () {
  console.log(200)
}, 1000)
console.log(300)
// 100 300 200

前端使用异步的场景

在可能等待的情况，等待过程中不能像alert一样阻塞程序运行，因此，所有的“等待的情况”都需要异步

• 定时任务：setTimeout,setInverval
• 网络请求：ajax请求，动态< img >加载
• 事件绑定

ajax请求代码示例

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

< img >加载示例

console.log('start')
var img = document.createElement('img')
img.onload = function () {
  console.log('loaded')
}
img.src = '/xxx.png'
console.log('end')

事件绑定示例

console.log('start')
decument.getElementById('btn1').addEventListener('click', function () {
  alert('clicked')
})
console.log('end')

异步和单线程

一次只能干一个事，暂存起来的函数会根据自己的代码判断什么时候解封

• 执行第一行，打印100
• 执行setTimeout后，传入setTimeout的函数会被暂存起来，不会立即执行（单线程的特点，不能同时干两件事）
• 执行最后一行，打印300
• 待所有程序执行完，处于空闲状态时，会立马看有没有暂存起来的要执行
• 发现暂存起来的setTimeout中的函数无需等待时间,就立即拿过来执行

解答

• 同步和异步的区别是什么？分别举一个同步和异步的例子

  • 同步会阻塞代码执行，而异步不会
  • alert是同步，setTimeout是异步

• 一个关于setTimeout的笔试题

  console.log(1)
  setTimeout(function () {
  console.log(2)
  }, 0)
  console.log(3)
  setTimeout(function () {
  console.log(4)
  }, 1000)
  console.log(5)
  // 1 3 5 2 4

• 前端使用异步的场景

  • 定时任务：setTimeout,setInverval
  • 网络请求：ajax请求，动态< img >加载
  • 事件绑定

gitbub地址 持续更新 可下载

https://github.com/zust-hh/JavaScript_interviewing_knowledge_learning