• 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请求线程,浏览器定时触发器,

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

  • 相关阅读:
    jQuery的选择器
    01-jQuery的介绍
    client、offset、scroll系列
    BOM
    定时器
    js中的面向对象
    javascript小练手
    DOM介绍
    关于DOM的事件操作
    伪数组 arguments
  • 原文地址:https://www.cnblogs.com/langshening/p/9978360.html
Copyright © 2020-2023  润新知