js同步和异步

异步并不是同步,异步是单线程,异步指的是让CPU暂时搁置当前请求的响应,处理下一个请求,当通过轮询或其他方式得到回调通知后,开始运行。

并发是多线程,

同步:一定要等任务执行完了,得到结果,才执行下一个任务。

异步:不等任务执行完,直接执行下一个任务。

简而言之,言而总之:同步就是我强依赖你(对方),我必须等到你的回复,才能做出下一步响应。即我的操作(行程)是顺序执行的,中间少了哪一步都不可以,或者说中间哪一步出错都不可以,类似于编程中程序被解释器顺序执行一样;同时如果我没有收到你的回复,我就一直处于等待、也就是阻塞的状态。 异步则相反,我并不强依赖你,我对你响应的时间也不敏感,无论你返回还是不返回,我都能继续运行;你响应并返回了,我就继续做之前的事情,你没有响应,我就做其他的事情。也就是说我不存在等待对方的概念,我就是非阻塞的。

我们先不深入异步概念,先从「表象」来看看怎么样的代码是异步代码:

异步代码的书写顺序与执行顺序不同。

区别: 会不会阻塞当前程序运行

什么时候需要异步:

(1)需要等待的时候,等待过程不能卡在这吧

(2)等待过程不像alert一样阻塞程序运行

(3)等待的情况都要异步

使用异步的场景:

(1)定时任务,setTimeout,setInterval

(2)网络请求: ajax请求,动态<img>加载

(3)事件绑定,点击等交互事件

几个问题:

1. 同步和异步的区别是什么

同步阻塞代码运行,alert是同步,setTimeout是异步

2. 一个setTimeout的例子

JS引擎扫描一遍,将事件按顺序加入任务队列,然后执行,此时注意setTimeout中的函数是在定时完成后才会加入队列

所以刚开始队列中 有 console.log(1),setTimeout(fn1,0),console.log(3),setTimeout(fn2,1000),console.log(5)

输出1,执行setTimeout后,再过0ms将fn1加入到任务队列尾部,此时队列中有console.log(3),setTimeout(fn2,1000),console.log(5),fn1

再输出3,执行setTimeout,过了1000ms将fn2加到任务队列尾部,输出5,再执行fn1,fn2

事件执行过程中的事件循环,JS引擎有个运行栈,不断从任务队列里读取任务运行,运行栈为空,便检查任务队列,一直加入,循环往复,直至任务队列也为空

什么情况下需要用到异步?

现在有三个函数,taskA()、taskB() 和 taskC(),三个任务互不影响。

taskA 和 taskC 执行得很快,但是 taskB 执行需要 10 秒钟。

// 同步的写法
function taskB(){
  var response = $.ajax({
    url:"/data.json",
    async: false // 注意这里 async 为 false,表示是同步
  })
  return response // 十秒钟后,返回 response
}

taskA()
taskB()
taskC()

taskC 一定要等 taskB 执行完了才能执行,这就是同步。

执行顺序为:

A -> B -> AJAX 请求 -> C ---------------------------

现在换成异步:

// 异步的写法
function taskB(){
  var result = $.ajax({
    url:"/data.json",
    async: true // 异步
  })
  return result // 一定要注意,现在的 result 不是上面的 response
}
taskA()
taskB()
taskC()

这样写之后,执行顺序就是

  1. A -> B -> C ---------------------------------------

  2.  

    -> AJAX 请求 --------------------------------

就是说 AJAX 请求和任务C 同时执行。

但是请注意执行的主体。AJAX 请求是由浏览器的网络请求模块执行的,taskC 是由 JS 引擎执行的。

综上,如果几个任务互相独立,其中一个执行时间较长,那么一般就用异步地方式做这件事。

所以像setTimeOut定时任务、ajax请求都是需要一定的时间的,所以一般都是用异步方式,不会阻塞后边代码的执行,而是设置了定时时间之后、或发送了请求之后,就移动到单线程的任务队列的最尾端,等后边执行完之后再执行定时代码或者ajax请求的回调函数内代码。

JS 引擎不能同时做两件事

有些人说异步是同时做两件事,但其实 JS 引擎不会这样。

以 setTimeout 为例,setTimeout 里面的代码一定会在当前环境中的任务执行完了「之后」才执行。

异步意味着不等待任务结束,并没有强制要求两个任务「同时」进行。

但是 AJAX 请求是可以与 JS 代码同时进行的,因为这个请求不是由 JS 引擎负责,而是由浏览器网络模块负责。

以上,就是异步的简介。

原文地址:https://www.cnblogs.com/zhaoyanhaoBlog/p/11296223.html

时间: 2024-10-12 04:17:16

js同步和异步的相关文章

node.js同步及异步读取写入删除文件1

node.js初学中,在文件中同步及异步读取文档的过程: 1.同步读取: var fs=require("fs") //直接读取文档,并将同步返回值,赋值给变量 var data=fs.readFileSync("input.txt"); console.log(data.toString()); 2.异步读取: var fs=require("fs"); //通过回调函数返回获得的data值: fs.readFile("input.t

回调callback的C#及JS同步、异步实现

代码很简单,不多做解释,如果有疑问和建议请留言,回第一时间回复 C#代码first class Program { static void Main(string[] args) { MyCallback mc = new MyCallback(); mc.Callback(new Action(success), new Action(failed)); mc.Callback(new Action(() => { Console.WriteLine("无参匿名success"

Node.js 同步与异步编程

同步API: 只有当前API执行完成之后,才能继续执行下一行API.从上往下,一行一行的执行. console.log("one") console.log("two") 异步API: 当前的API执行不会阻塞后续代码的执行. console.log("one") setTimeout ( () => console.log("two"), 3000) console.log("three") 同步A

【Mocha.js 101】同步、异步与 Promise

前情提要 在上一篇文章<[Mocha.js 101]Mocha 入门指南>中,我们提到了如何用 Mocha.js 进行前端自动化测试,并做了几个简单的例子来体验 Mocha.js 给我们带来的便利. 在本篇文章中,我们将了解到 Mocha.js 的同步/异步测试,以及如何测试 Promise. 同步代码测试 在上一篇文章中,其实我们已经学会了如何测试同步代码.今天,我们 BDD 风格编写一个测试: var should = require( 'should' ); var Calculator

【Javascript】Js同步异步以及回调函数

一.前言 今天查看了requireJs方面的知识,看着看着就看到了JS中同步与异步操作的知识点,经过查阅了很多的资料,基本了解了JS的同步与异步的操作,其中涉及到的知识点如下: 什么时同步和异步? JS的是基于事件驱动的单线程语言,为啥会有异步操作这种多线程的操作??? 浏览器线程,浏览器内核线程间的合作? JS的异步操作都有哪些?它是如何工作的? 二.js单线程 JS的单线程 单线程的含义是js只能在一个线程上运行,也就是说,同一时间只能做一件事情,其他的任务则会放在任务队列里面排队等等js线

js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)

javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环中的同步任务,异步任务: 同步和异步任务在不同的执行"场所",同步的进入主线程,异步的进入Event Table执行并注册函数. 当指定的异步事情完成时,Event Table会将这个函数移入Event Queue. 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,推

js中请求数据的$post和$ajax区别(同步和异步问题)

$.post和$.Ajax都为页面上向后台发送请求,请求数据 1.post 因为post默认为异步请求,可是有时候我们会发现,本来要求请求马上出现,可是异步会导致后面突然再执行,这样就出很多问题 2.Ajax 最原始的Ajax,可以控制同步或者异步,属性:async设置为false,代表同步:async设置为true,代表异步 语法如下: $.ajax({ type : "post", url : "register/RegisterState", data : &

js同步-异步-回调

出处:https://blog.csdn.net/u010297791/article/details/71158212(1)上面主要讲了同步和回调执行顺序的问题,接着我就举一个包含同步.异步.回调的例子. let a = new Promise(//声明了一个Promise回调函数,能够使用then function(resolve, reject) { console.log(1) setTimeout(() => console.log(2), 0) console.log(3) cons

同步与异步、阻塞与非阻塞

"阻塞"与"非阻塞"与"同步"与"异步"不能简单的从字面理解,提供一个从分布式系统角度的回答.1.同步与异步同步和异步关注的是消息通信机制 (synchronous communication/ asynchronous communication)所谓同步,就是在发出一个*调用*时,在没有得到结果之前,该*调用*就不返回.但是一旦调用返回,就得到返回值了.换句话说,就是由*调用者*主动等待这个*调用*的结果. 而异步则是相反