什么是异步

异步:Asynchronous,async是与同步synchronous,sync相对的概念。

传统单线程编程中,程序的运行是同步的,指程序运行在一个控制流之中运行。而异步的概念就是不保证同步的,就是说一个异步过程的执行将不和原有的序列有什么关系。

简单来说就是:同步是按照你写的代码顺序去执行,异步则是不会按照代码顺序执行,从而异步的效率是更高的。

什么时候使用异步编程?

1)在可能发生等待的情况
2)等待过程中不能像alert一样阻塞程序的时候
3)因此,所有的“等待的情况”都需要异步
一句话总结就是需要等待但是又不能阻塞程序的时候需要使用异步

回调函数

回调函数就是一个函数,它是在我们启动一个异步任务的时候就告诉它:等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了,他自己会善始善终。

例如:

 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>javascript 异步编程</title>
6 </head>
7 <body>
8 <p>回调函数等待三秒后执行</p>
9 <p id="demo"></p>
10 <script>
11 function print(){
12 document.getElementById("demo").innerHTML="javascript 异步编程"
13 }
14 setTimeout(print, 3000)
15 </script>
16 </body>
17 </html>

上述代码中的setTimeout就是一个消耗时间较长的过程,她的第一个参数叫做回调函数,第二个参数是毫秒数,这个函数执行之后会产生子线程,子线程会等待3s,然后执行回调print函数。

当然也可以写成:

1             setTimeout(function (){
2 document.getElementById("demo").innerHTML="javascript 异步编程"
3 }, 3000)

异步Ajax

JavaScript之异步编程的更多相关文章

  1. javascript的异步编程

    同步与异步 介绍异步之前,回顾一下,所谓同步编程,就是计算机一行一行按顺序依次执行代码,当前代码任务耗时执行会阻塞后续代码的执行. 同步编程,即是一种典型的请求-响应模型,当请求调用一个函数或方法后, ...

  2. JavaScript入门⑨-异步编程●异世界之旅

    JavaScript入门系列目录 JavaScript入门①-基础知识筑基 JavaScript入门②-函数(1)基础{浅出} JavaScript入门③-函数(2)原理{深入}执行上下文 JavaS ...

  3. JavaScript中异步编程

    一 关于事件的异步 事件是JavaScript中最重要的一个特征,nodejs就是利用js这一异步而设计出来的.所以这里讲一下事件机制. 在一个js文件中,如果要运行某一个函数,有2中手段,一个就是直 ...

  4. 说一说javascript的异步编程

    众所周知javascript是单线程的,它的设计之初是为浏览器设计的GUI编程语言,GUI编程的特性之一是保证UI线程一定不能阻塞,否则体验不佳,甚至界面卡死. 所谓的单线程就是一次只能完成一个任务, ...

  5. javascript的异步编程方法

    一,callback 回调函数 即函数f1和函数f2的关系是f1(f2()); f2作为f1()的回调函数,在f1执行过程中就开始执行f2,先执行线程的主要逻辑,将比较耗时的任务放在后面执行. 回调函 ...

  6. [JavaScript] 的异步编程之手写一个Gernerator的例子

    <html> <head> <meta charset="UTF-8"> <title>Generator Demo</tit ...

  7. javascript的异步编程解决方案收集

    缘起 没理解js异步的同学看下面的例子: for (var i = 0; i < 5; i++) { //模拟一个异步操作 setTimeout(() => { console.log(i ...

  8. javascript实现异步编程的4种方法

    1.回调函数. 2.事件监听 .  思路:采用事件驱动模式.任务的执行不取决于代码的顺序,而取决于某个事件是否发生 3.观察者模式 (发布/订阅模式)   代码如下: jQuery.subscribe ...

  9. javascript异步编程的前世今生,从onclick到await/async

    javascript与异步编程 为了避免资源管理等复杂性的问题, javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为 ...

  10. JavaScript异步编程(2)- 先驱者:jsDeferred

    JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范. 研究javascri ...

随机推荐

  1. 【译】2022 年回顾:Web 性能有哪些新变化?

    原文地址:https://www.debugbear.com/blog/2022-in-web-performance 若对文中提到的一些性能参数不太熟悉,可以参考我之前的一篇博文<性能参数和优 ...

  2. 可视化—AntV G6 高亮相邻节点的两种方式

    目录 内置的高亮节点 自定义高亮 自定义高亮时保持原始颜色 总结 案例完整代码 通过官方文档,可知高亮相邻节点分为两种方法,文档描述并不是很清楚,对刚接触这个库的小白并不是很友好,慢慢总结慢慢来吧 内 ...

  3. C/S UDP通信实践踩坑记录与对于ICMP的进一步认识

    背景 最近有个业务场景需要服务端(简称S)与客户端(简称C)设计一套基于UDP的通信协议--要求尽可能快的前提下可容忍一定丢包率,得以比较深入地学习和了解UDP通信和实践,在开发调试期间先后碰到了C端 ...

  4. [python] mxnet60分钟入门Gluon教程

    mxnet60分钟入门Gluon教程代码下载,适合做过深度学习的人使用.入门教程地址: https://beta.mxnet.io/guide/getting-started/crash-course ...

  5. 完整数据分析流程:Python中的Pandas如何解决业务问题

    开篇 作为万金油式的胶水语言,Python几乎无所不能,在数据科学领域的作用更是不可取代.数据分析硬实力中,Python是一个非常值得投入学习的工具. 这其中,数据分析师用得最多的模块非Pandas莫 ...

  6. Educational Codeforces Round 141 (Rated for Div. 2) A-E

    比赛链接 A 题意 给一个数组 \(a\) ,要求重排列以后 \(a[i] \neq a[1,i-1]\) ,其中 \(a[1,i-1]\) 是前 \(i-1\) 项和. 如果无解则输出 NO :否则 ...

  7. 【Vue3.0】关于 script setup 语法糖的用法

    script setup - 简介 先来看一看官网关于 <script setup> 的介绍: 要彻底的了解 setup 语法糖,你必须先明确 setup() 这个 组合式API 官网中对 ...

  8. PWA-H5 Web App优化探索之路(Service Worker,Lighthouse)

    PWA是什么? Progressive Web App 渐进式web应用程序,简单来说,就是可以让你的WEB App,带来与原生App相媲美的用户体验.. 为什么要用PWA? 简单来说,是为了web应 ...

  9. 今天学到的新知识--自己的电脑可以像Github Pages、码云 Pages一样发布静态资源

    大佬教我的,感觉这个很神奇哦 假设下面这个路径是我的本地电脑静态资源路径 打开powershell窗口 然后按照下图的样子执行命令 复制网址就可以访问啦 然后可以通过 https://iplocati ...

  10. Grafana 系列文章(一):基于 Grafana 的全栈可观察性 Demo

    ️Reference: https://github.com/grafana/intro-to-mlt 这是关于 Grafana 中可观察性的三个支柱的一系列演讲的配套资源库. 它以一个自我封闭的 D ...