JS中的异步

Hello，日常更新的我“浪”回来了！！！

JS中有三座高山：异步和单线程、作用域和闭包、原型原型链

今天“浪”的主题是JS中的异步和单线程的问题。

主要从这三个方面入手

一、什么是异步（与同步作比较）

二、前端使用异步的场景

三、异步和单线程

 

一：什么是异步 

说异步之前我们先了解一下同步：同步可以简单的来说就是顺序执行

　　console.log(100);

   alert(200)       //点击确定往下执行，如果不点击确定，就会阻塞不往下执行

   console.log(300)

　　//打印100，弹出200（点击确定往下执行），打印300

 

接下来我们来说异步（当执行异步代码时，不会影响另一些代码执行）

 　console.log(100);

   setTimeout(function() { //异步执行，非阻塞并不妨碍后续代码执行
       console.log(300)

   }, 1000);

   console.log(200)

 

这段代码的执行结果为：

 

异步和同步的区别就在于：

　　　　同步：会阻塞后续代码的执行

　　　　异步：不会阻塞代码执行

 

二：前端使用异步的场景

　　1、定时任务：setTimeout  、 setInterval（代码同上）

　　2、网络请求 ：ajax请求、动态的创建<img>加载、

　　　　console.log("start")
      $.get("./data.json",(data)=>{
          console.log(data)
      })
      console.log("end")

　　　　//打印start,打印end 等待获取回调函数传来的data数据渲染页面
　　　　//为啥ajax要用异步呢？因为向服务器请求数据，谁也不知道多长时间能返回数据（有可能几秒，有可能拿不到数据）
　　　　　如果数据拿不到，页面肯定还是要正常显示的，所以必须是异步

 

 

　　

　　　 console.log("start")
      var img = document.createElement("img");
      img.onload =function(){
          console.log("img is onload")
      }
      img.src='/aa.png'
      console.log("end")
　　　　
　　　　//打印start,打印end，加载图片

 

 

　　3、事件绑定

　　　 console.log("start")
      document.getElementById("btn").addEventListener("click",()=>{ //ES6箭头函数
          console.log("click is finshed")
      })
      console.log("end")

　　//打印start,打印end，加载图片

 

 

　　

 三 、异步和单线程

　　下面代码和介绍异步的代码区别是延时器没有设置时间

 　 console.log(100);

   setTimeout(function() {
       console.log(300)
   });

   console.log(200)
　　

 

 

 　　执行顺序：

　　　　先打印100，

　　　　执行setTimeout，这个函数会被暂存起来，不会立即执行（因为单线程只能一个一个执行）

　　　　打印300，

　　　　等待所有的程序执行完后，浏览器会看有没有暂存的，

　　　　暂存里面有setTimeout，setTimeout没有设置时间，不用等待然后立刻执行

 

 　　那什么叫单线程呢？？

　　　　简单来说就是一次只能干一件事，一个一个排队，不能多个一起执行（因为不是多线程）

　　　　标准定义：浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，

　　　　但前端的某些任务是非常耗时的，比如网络请求，定时器和事件监听，如果让他们和别的任务一样，都老老实实的排队等待执行的话，

　　　　执行效率会非常的低，甚至导致页面的假死。所以，浏览器为这些耗时任务开辟了另外的线程，主要包括http请求线程，浏览器定时触发器，

　　　　浏览器事件触发线程，这些任务是异步的。