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

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

JS中的异步的更多相关文章

  1. JS中的异步以及事件轮询机制

    一.JS为何是单线程的? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊.(在JAVA和c#中的异步 ...

  2. js中的异步与同步,解决由异步引起的问题

    之前在项目中遇到过好多次因为异步引起的变量没有值,所以意识到了认识js中同步与异步机制的重要性 在单线程的js中,异步代码会被放入一个事件队列,等到所有其他代码执行后再执行,而不会阻塞线程. 下面是j ...

  3. JS中的异步与回调

    问题的引出:在js中使用异步调用时,有可能会出现在异步的回调函数中设置调用之外的变量值,但在异步调用完成后去使用变量,却发现这些变量值并没有被成功设置的情况.如: google map中的地理编码,地 ...

  4. js中的异步[Important]

    js作为前端最主流的语言,主要处理页面显示变化(mutation)和异步(asynchronicity), js语言的基本要素和使用惯例的演化大都围绕着这两大主题,两者均值得总结和思考的主题, 这里先 ...

  5. 互联网我来了 -- 2. js中&quot;异步/堵塞&quot;等概念的简析

    一.什么是"异步非堵塞式"? 这个名字听起来非常恶心难懂,但假设以 买内裤 这件事情来比喻运行程序的话就非常easy理解"异步非堵塞式"的涵义了. 比如你是一个 ...

  6. 咱们来聊聊JS中的异步,以及如何异步,菜鸟版

    为什么需要异步?why?来看一段代码. 问题1: for(var i=0;i<100000;i++){ } alert('hello world!!!'); 这段代码的意思是执行100...次后 ...

  7. promise 的基本概念 和如何解决js中的异步编程问题 对 promis 的 then all ctch 的分析 和 await async 的理解

    * promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步 指的是被请求者 解析:被请求者(该事情的处理者)在处理完事情的时候的 ...

  8. 【第三周读书笔记】浅谈node.js中的异步回调和用js-xlsx操作Excel表格

    在初步学习了node.js之后,我发现他的时序问题我一直都很模糊不清,所以我专门学习了一下这一块. 首先我们来形象地理解一下进程和线程: 进程:CPU执行任务的模块.线程:模块中的最小单元. 例如:c ...

  9. Node.js中的异步I/O是如何进行的?

    Node.js的异步I/O通过事件循环的方式实现.其中异步I/O又分磁盘I/O和网络I/O.在磁盘I/O的调用中,当发起异步调用后,会将异步操作送进libuv提供的队列中,然后返回.当磁盘I/O执行完 ...

随机推荐

  1. 简单JavaScript小程序

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  2. 【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装

    // DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现 ...

  3. 小松之LINUX驱动学习笔记之模块间函数调用通讯

    1. 符号导出函数 EXPORT_SYMBOL() EXPORT_SYMBOL标签内定义的函数对全部内核代码公开,不用修改内核代码就可以在您的内核模块中直接调用. EXPORT_SYMBOL_GPL( ...

  4. Spring学习总结(18)——Spring整合Mysql数据库一主多从、多主多从配置

    一.新建jdbc.properties配置文件 master.jdbc.driverClassName=com.mysql.jdbc.Driver master.jdbc.url=jdbc:mysql ...

  5. BeanPostProcessor bean 的后置处理器

    一. 自定 bean 的后置处理器 MyBeanPostProcessor 类.当你在初始化容器中的 bean 之前和之后,都会调用该处理器中的方法 @Component //将该后后置处理器加入到容 ...

  6. C#中的Attribute Property区别

    Attribute 一般译作"特性",Property 仍然译为"属性". Attribute 是一种可由用户自由定义的修饰符(Modifier),可以用来修饰 ...

  7. BA-强强联手江森自控携手日立空调(转载)

    文章出处:http://www.aircon.com.cn   2014年1月6日   艾肯空调制冷网 江森真是非常擅长资本运作,也对技术前沿定义的很明白,快速获得技术靠资本也考内力,内化后就开始市场 ...

  8. CF876A Trip For Meal

    CF876A Trip For Meal 题意翻译 小熊维尼非常喜欢蜂蜜! 所以他决定去拜访他的朋友. 小熊有三个最好的朋友:兔子,猫头鹰和小毛驴,每个人都住在自己的房子里. 每对房屋之间都有蜿蜒的小 ...

  9. 【推荐】你必须知道的EF知识和经验

    阅读目录   推荐MiniProfiler插件 数据准备 foreach循环的陷进 AutoMapper工具 联表查询统计 性能提升之AsNonUnicode 性能提升之AsNoTracking 多字 ...

  10. Android获取系统时间的多种方法

    Android中获取系统时间有多种方法,可分为Java中Calendar类获取,java.util.date类实现,还有android中Time实现. 现总结如下: 方法一: ? 1 2 3 4 5 ...