首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏前端二次元

    JavaScript——异步进阶

    本期介绍JS 的特色就是异步编程,所有有很多关于异步的考点,本章都会讲解。如 event loop、promise、async-await、微任务和宏任务。学不会这些,就不算是精通 JS。 event loop,也叫事件循环/事件轮询,JS是单线程运行的,从前到后,一行一行执行,如果某一行执行报错,则停止下面的代码执行,先把同步代码执行完,再执行异步异步要基于回调来实现,event loop 就是异步回调的实现原理。 callback hell(回调地狱),Promise then catch 链式调用,但也是基于回调函数,async/await是用同步语法编写异步代码,是同步语法,彻底消灭回调函数,是异步写法的最佳解决方式 ,是消灭异步回调的终极武器。

    41210编辑于 2023-11-23
  • 来自专栏大数据

    JavaScript进阶-Promise与异步编程

    JavaScript开发中,异步编程是绕不开的一环,而Promise作为解决异步问题的重要工具,自ES6起便成为开发者手中的利器。 fetchSecondData(data1.id); console.log(data2); } catch (error) { console.error('错误:', error); } } 易错点3: setTimeout(reject, 800, '超时')) ]).then(data => { // ... }).catch(error => { // 处理超时或失败 }); 总结 Promise是JavaScript 异步编程的核心之一,掌握其基本原理和高级用法对于提高代码质量至关重要。 通过识别并避免上述易错点,结合async/await等现代语法特性,可以使异步逻辑变得更加清晰和易于管理。不断实践,逐步深入理解异步编程模型,将使你在面对复杂异步流程时更加游刃有余。

    36510编辑于 2024-06-21
  • 来自专栏从0到1前端开发

    JavaScript 进阶 - 第3

    JavaScript 进阶 - 第3天 了解构造函数原型对象的语法特征,掌握 JavaScript 中面向对象编程的实现方式,基于面向对象编程思想实现 DOM 操作的封装。 面向对象编程是一种程序设计思想,它具有 3 个显著的特征:封装、继承、多态。 </script> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-plzw7v0P-1668165712668)(assets/prototype_3.png)] 构造函数 1.2 继承 继承是面向对象编程的另一个特征,通过继承进一步提升代码封装的程度,JavaScript 中大多是借助原型对象实现继承的特性。 面向对象多态的特性在 JavaScript 中应用场景相对较少,本次课中暂不讲解。 二、异常处理 了解 JavaScript 中程序异常处理的方法,提升代码运行的健壮性。

    49420编辑于 2022-11-18
  • 来自专栏coding个人笔记

    JavaScript异步

    所以JavaScript把任务分成了两种,一种是同步任务,另一种是异步任务。 简单来说过程是这样的: 1、 主线程执行所有同步任务,形成一个执行栈; 2、 在主线程执行的过程中形成的异步任务,会进入任务队列; 3、 当执行栈中所有的同步任务队列执行完毕,任务队列自动进入执行栈,变成同步任务 (function() { console.log( "3" ) }, 1000 ); setTimeout(function() { console.log( "4" ) }, 2000 ); setTimeout(function() { console.log( "5" ) }, 3000 ); console.log( "6" ); //1 6 2 3 4 5 每隔一秒就会有一个任务队列 异步其实挺简单的,可能本人刚开始进入了误区,理解异步可以让我们对于JavaScript的执行原理有一定的理解。 (完)

    70210发布于 2020-04-23
  • 来自专栏代码编写世界

    JavaScript异步编程3——Promise的链式使用

    概述 在上一篇文章《JavaScript异步编程2——结合XMLHttpRequest使用Promise》中,简要介绍了Ajax与Promise的结合使用。 这样,我们就有了两个异步操作的例子:读取一个json文件;通过一个地址加载图像。 考虑一下,如果存在两个异步操作,它们需要在执行一个操作之后再执行另外一个操作(例如在这里,我们把图像地址存储在json文件中,通过访问json中的地址来加载图像),该如何做呢? 在之前的文章中说过,Promise的目的,是希望异步行为能像同步操作一样遵循顺序,从而避免嵌套回调。 , error); }); }); 参考 JavaScript Promises: An introduction

    1.2K20发布于 2021-05-07
  • 来自专栏hotarugaliの技术分享

    JavaScript异步操作

    Promise.all()和Promise.race() 并行调用异步操作 两个函数均用于并行调用多个异步操作使用 All:两个异步操作都resolve之后调用then() var p1 = new Promise p1, p2]).then(function (results) { console.log(results); // 获得一个Array: ['P1', 'P2'] }); Race:最快的异步操作

    63810编辑于 2022-03-01
  • 来自专栏前端进阶之路

    JavaScript异步编程

    #前言 从我们一开始学习JavaScript的时候就听到过一段话:JS是单线程的,天生异步,适合IO密集型,不适合CPU密集型。 但是,多数JavaScript开发者从来没有认真思考过自己程序中的异步到底是怎么出现的,以及为什么会出现,也没有探索过处理异步的其他方法。到目前为止,还有很多人坚持认为回调函数就完全够用了。 但是,随着JavaScript面临的需求越来越多,它可以运行在浏览器、服务器、甚至是嵌入式设备上,为了满足这些需求,JavaScript的规模和复杂性也在持续增长,使用回调函数来管理异步也越来越让人痛苦 ,这一切,都需要更强大、更合理的异步方法,通过这篇文章,我想对目前已有JavaScript异步的处理方式做一个总结,同时试着去解释为什么会出现这些技术,让大家对JavaScript异步编程有一个更宏观的理解 Step3 - 生成器Generator 在Step1中,我们确定了用回调表达异步流程的两个关键问题: 基于回调的异步不符合大脑对任务步骤的规范方式 由于控制反转,回调并不是可信任的 在Step2中,我们详细介绍了

    1.5K20发布于 2018-10-31
  • 来自专栏前端学习文档

    JavaScript 异步模式

    source=cloudtencen 什么是异步模式? 不会等待当前任务执行完毕,才会去执行下一个任务,这就是异步模式(Asynchronous)。 开启异步后,就会跳过本任务,开始执行下一个任务,后续的逻辑一般会通过回调函数的方式定义。 异步模式执行中,涉及到调用栈(Call stack)、消息队列(Queue)、微任务队列(Microtask Queue)、事件循环(Eevent Loop)、运行环境(浏览器是 WebAPIs)。 异步方案 ES2015 提供的 Pormise 方案 ES2015 提供的 Generator ES2017 提供的 Async / Await 语法糖(可以写出更扁平的异步代码) 基础案例 console.log

    48420编辑于 2023-05-14
  • 来自专栏ops技术分享

    JavaScript 异步编程

    为了解决这个问题,JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。 ; } setTimeout(print, 3000); 这段程序中的 setTimeout 就是一个消耗时间较长(3 秒)的过程,它的第一个参数是个回调函数,第二个参数是毫秒数,这个函数执行之后会产生一个子线程 ,子线程会等待 3 秒,然后执行回调函数 "print",在命令行输出 "Time out"。 当然,JavaScript 语法十分友好,我们不必单独定义一个函数 print ,我们常常将上面的程序写成: 实例 setTimeout(function () { document.getElementById ; }, 3000); 注意:既然 setTimeout 会在子线程中等待 3 秒,在 setTimeout 函数执行之后主线程并没有停止,所以: 实例 setTimeout(function () {

    83230发布于 2021-07-19
  • JavaScript 异步编程

    为了解决这个问题,JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。 ; } setTimeout(print, 3000); 这段程序中的 setTimeout 就是一个消耗时间较长(3 秒)的过程,它的第一个参数是个回调函数,第二个参数是毫秒数,这个函数执行之后会产生一个子线程 ,子线程会等待 3 秒,然后执行回调函数 "print",在命令行输出 "RUNOOB!"。 当然,JavaScript 语法十分友好,我们不必单独定义一个函数 print ,我们常常将上面的程序写成: 实例 setTimeout(function () { document.getElementById ; }, 3000); 注意:既然 setTimeout 会在子线程中等待 3 秒,在 setTimeout 函数执行之后主线程并没有停止,所以: 实例 setTimeout(function () {

    15710编辑于 2025-12-16
  • 来自专栏HZFEStudio

    JavaScript 异步编程

    异步编程方案有哪些 JavaScript 异步编程方案各有什么优缺点 回答关键点 阻塞 事件循环 回调函数 JavaScript 是一种同步的、阻塞的、单线程的语言,一次只能执行一个任务。 "; document.body.appendChild(pElem); }); 异步回调是编写和处理 JavaScript 异步逻辑的最常用方式,也是最基础的异步模式。 但是随着 JavaScript 的发展,异步回调的问题也不容忽视: 回调表达异步流程的方式是非线性的,非顺序的,理解成本较高。 回调会受到控制反转的影响。 ); test1.remove("event1", fn1); // ["hzfe1", "hzfe2", "hzfe3"] fn1打印 // fn2: hzfe1,hzfe2,hzfe3 发布/订阅模式可以更细致地了解到有多少种事件类型以及每种类型对应的订阅事件 6. async/await async/await 属于 ECMAScript 2017 JavaScript 版的一部分,使异步代码更易于编写和阅读。通过使用它们,异步代码看起来更像是同步代码。

    1.4K00发布于 2021-10-30
  • 来自专栏Android研究院

    JavaScript 异步编程

    ❝掌握JavaScript主流的异步任务处理 ( 本篇文章内容输出来源:《拉钩教育大前端训练营》参阅《你不知道的JavaScript中卷》异步章节)❞ JavaScrip 采用单线程模式工作的原因,需要进行 异步模式 通过一个图来演示异步任务,用到事件循环与消息队列机制实现 ? Untitled 0.png Promise异步方案 常见的异步方案就是通过回调函数来实现,导致回调地狱的问题,CommonJS社区提出了Promise方案并在ES6中采用了。 目前大部分异步回调作为宏任务 常见的宏任务与微任务如下图所示: ? Untitled 2.png 下面是JavaScript执行异步任务的执行时序图: ? Untitled 3.png 看下面的例子来进行理解: 下列例子中输出: 2 4 1 3 5 这其实也符合了上图事件循环的原理,先主任务执行输出: 2 4 之后查询是否有微观任务没有就新建宏观任务执行

    1.5K10发布于 2020-07-31
  • 来自专栏OECOM

    javascript异步编程

    简单来说,异步编程就是在执行一个指令之后不是马上得到结果,而是继续执行后面的指令,等到特定的事件触发后,才得到结果。 也正是因为这样,我们常常会说: JavaScript 是由事件驱动的。 ,promise提供了一个promise.all的方法 var p1 = Promise.resolve(3); var p2 = 1337; var p3 = new Promise((resolve console.log(values); // [3, 1337, "foo"] }); 3.Generator 在 ES 2015 中,出现了 Generator 的语法,熟悉 Python 的同学肯定对这种语法有点了解 在 JavaScript 中,Generator 的 function 与 函数名之间有一个 *, 函数内部使用 yield 关键词,定义不同的状态。 JavaScript异步回调问题,目前可以借助 babel 在生产环境中使用。

    79510发布于 2020-07-01
  • 来自专栏Cellinlab's Blog

    JavaScript Async (异步)

    # 异步 事实上,程序中现在 运行的部分和将来 运行的部分之间的关系就是异步编程的核心。 # 异步控制台 并没有什么规范或一组需求指定 console.* 方法族如何工作——它们并不是 JavaScript 正式的一部分,而是由宿主环境添加到 JavaScript 中的。 换句话说,JavaScript 引擎本身并没有时间的概念,只是一个按需执行 JavaScript 任意代码片段的环境。“事件”(JavaScript 代码执行)调度总是由包含它的环境进行。 并行线程的交替执行和异步事件的交替调度,其粒度是完全不同的。 JavaScript 从不跨线程共享数据,这意味着不需要考虑这一层次的不确定性。但是这并不意味着 JavaScript 总是确定性的。 我们的顺序阻塞式的大脑计划行为无法很好地映射到面向回调的异步代码。这就是回调方式最主要的缺陷:对于它们在代码中表达异步的方式,我们的大脑需要努力才能同步得上。

    92330编辑于 2023-05-17
  • 来自专栏Krryblog

    JavaScript 异步编程

    博客地址:https://ainyi.com/96 众所周知,JavaScript 是单线程的,但异步在 js 中很常见,那么简单来介绍一下异步编程 同步编程和异步编程 同步编程,计算机一行一行按顺序依次执行代码 ;那么 JavaScript 单线程的异步编程可以实现多任务==并发执行== 重点实现 js 异步的方式,就是==事件循环==,之前写过关于事件循环的例子,可看:JavaScript 事件循环、异步和同步 首先 JavaScript 的同步任务是进入主线程的执行栈执行;异步任务则进入==消息队列(任务队列)==,一个存储着待执行任务的队列,严格按照时间先后顺序执行,排在队头的任务将会率先执行,而排在队尾的任务会最后执行 ,重复这个过程 [28.jpg] 简单来说:事件循环其实就是入栈出栈的循环 这样就能实现异步方式 js 的异步方式 setTimeout ajax Promise Generator setTimeout 即使将时间设置为 0,也会延迟执行,即异步执行。

    87630发布于 2020-09-15
  • 来自专栏ccylovehs

    JavaScript异步编程

    (可以先思考一下看看与正确输出顺序是否一致) 1 function foo(){ 2 console.log('start...'); 3 return bar(); 4 } 然后往下执行发现是promise.then回调函数,此为异步微任务,放入任务队列中,等待同步任务执行完才能执行 再往下执行是timeout定时器,此为异步宏任务,也放入任务队列中,等待同步任务执行完、异步微任务才能执行 再往下是foo方法,此为同步任务,借用网络流行的一句话 “JavaScript中的函数是一等公民”,打印日志start...后回调执行bar方法,到这里就有两个执行栈了(依次将foo、bar放入栈中, bar执行完就弹出栈,foo依次弹出) 关于并发模型和Event Loop 请看MDN(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop ) 3.异步编程 关于异步编程的方式,常用的定时器、ajax、Promise、Generator、async/await,详细介绍如下: 3.1.定时器 3.1.1.setTimeout与setInterval

    1.2K20发布于 2018-09-14
  • 来自专栏Super 前端

    JavaScript异步编程

    Javascript语言的执行环境是”单线程”(single thread)。所谓”单线程”,就是指一次只能完成一件任务。 Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。 “异步模式”非常重要。 在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。 在服务器端,”异步模式”甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有http请求,服务器性能会急剧下降,很快就会失去响应。 然而,异步执行最大的问题就是执行顺序。 , 1000); 这些操作不能在初始化的解析过程中完成的,也就是说在JavaScript代码运行的同时必须新启动一个解析器来解析新的代码。性能消耗较大。

    64141发布于 2019-08-15
  • 来自专栏XC's Blog 日常笔记

    JavaScript 进阶

    变量在未声明即被访问时会报语法错误 变量在var声明之前即被访问,变量的值为 undefined let / const 声明的变量不存在变量提升 变量提升出现在相同作用域当中 实际开发中推荐先声明再访问变量 函数进阶 展开运算符 (…), 将一个数组进行展开,不会修改原数组 const arr=[1,2,3,4,5] console.log(...arr) //1 2 3 4 5 典型运用场景: 求数组最大值(最小值 )、合并数组等 const arr=[1,2,3,6,4,5] const arr2=[7,8,9] //最大值 const max=Math.max(...arr) //合拼 const arr3=[ // 普通的数组 let arr = [1, 2, 3]; // 批量声明变量 a b c // 同时将数组单元值 1 2 3 依次赋值给变量 a b c let [a, b, c] 在 JavaScript 内置了一些构造函数,绝大部的数据处理都是基于这些构造函数实现的,JavaScript 基础阶段学习的 Date 就是内置的构造函数。

    1.8K20编辑于 2023-04-03
  • 来自专栏神葳总局

    JavaScript进阶

    JavaScript进阶学习笔记 # 正则表达式 正则用来定义一些字符串的规则,程序可以根据这些规则来判断一个字符串是否符合规则, 也可以将一个字符串中符合规则的内容提取出来。 var btn = document.getElementById("btn"); btn.onclick = function(){ }; </script> </body> 1 2 3 { var btn = document.getElementById("btn"); btn.onclick = function(){ }; }; </script> 1 2 3 向下滚 3 //判断鼠标滚轮滚动的方向 if(event.wheelDelta > 0 || event.detail < 0){ //向上滚 }else{ //向下滚 } 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 复制 ---- # JSON JavaScript

    1.8K20发布于 2021-01-22
  • 来自专栏FunTester

    JavaScript 异步编程入门

    最近开始不断学习实践 JavaScript ,出于性能测试的敏感,首先研究了 JavaScript异步编程实践,目前看跟之前学过的 Java 和 Go 都不太一样。 在 JavaScript 中,异步编程尤为重要,原因在于它的单线程特性。JavaScript 在浏览器环境下运行时,只有一个主线程负责执行代码。 在 JavaScript异步编程中,回调函数是最早且最基础的实现方式之一。当某个异步操作(如网络请求或定时器)完成时,JavaScript 运行时环境会调用提供的回调函数,继续执行后续的逻辑。 这种模式允许我们在异步任务完成后进行处理,而不阻塞主线程。 在 JavaScript 中,回调函数通过结合浏览器或 Node.js 的事件循环机制来实现异步行为。 异步编程的重要性 在 JavaScript 中,异步编程至关重要,因为 JavaScript 运行在单线程环境中,尤其是在浏览器和 Node.js 等平台中。单线程意味着同一时间只能执行一个任务。

    49510编辑于 2025-01-23
领券