javascript 实现多个异步函数的同时执行后再执行回调函数

最新推荐文章于 2023-08-22 12:15:01 发布

原创

最新推荐文章于 2023-08-22 12:15:01 发布 · 6.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #异步 #回调函数 #前端

本文探讨了如何使用JavaScript原生方法实现多个异步函数的同时执行，并在所有函数完成后调用回调函数。文章源于一次面试问题，作者通过分享代码展示了实现思路，欢迎读者留言交流其他解决方案。

首先，思路来自于 http://www.cnblogs.com/liuliang-wifi/p/6832850.html。这篇文章写的很好，相比而言这篇文章是更有难度一点的，有兴趣的可以欣赏一下这篇文章。链接：点击打开链接

其次，这个问题来自于阿里一面的姐姐问道的。

当时我的回答是调用Promise函数来实现，面试姐姐希望我实现一下Promise函数，我回忆起阮一峰教程里是通过Generator函数实现的。但是面试姐姐更希望用javascript原生实现，我当时脑子一个懵，心里其实是有思路的，但是当时卡住不知道如何回答，哈哈。所以今天就整理了一下。

代码如下：

 
  function 
  ajax1( 
  that){ 
 
  setTimeout( 
  function(){ 
 
  console. 
  log( 
  'I am ajax1!'); 
 
  that.

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ccfortaeyeon

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【node】nodejs环境下多个函数异步回调统一异步回调执行结果写法

子非渔的博客

09-18

3387

nodejs异步回调，多个回调函数的返回结果统一回调的解决方法

javascript封装addLoadEvent实现页面同时加载执行多个函数的方法

12-02

此外，这个技术也体现了JavaScript的事件驱动模型和函数式编程思想，即通过事件监听和回调函数来处理异步操作，以及通过函数作为参数传递来实现高阶函数的特性。这种封装方法在JavaScript开发中是非常实用的，并且在...

参与评论您还未登录，请先登录后发表或查看评论

几个异步操作，全部执行完后再执行回调函数

weixin_44999830的博客

05-30

3275

方法一：通常的讲,我们可以设置一个flag变量,然后在各自的ajax的成功回调内去维护这个变量数量，当满足条件时,我们来触发后续函数 let flag = 0; // ajax为异步操作，结合Promise使⽤可以轻松实现异步操作队列 function ajax1(num) { return new Promise(resolve => { setTimeout(() => { flag++; console.log('第1个异步请求'+flag); // 输出处理结果

JavaScript是如何工作的04:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式！...

web前端开发

12-19

258

原文 |https://blog.sessionstack.com译文|https://segmentfault.com/a/1190000017419328此篇是 JavaScr...

详解JS的四种异步解决方案：回调函数、Promise、Generator、async/await

油墨香^-^的博客

07-28

330

JavaScript异步编程经历了从回调函数到async/await的演进过程。回调函数是最基础的解决方案，但容易出现"回调地狱"问题；Promise通过链式调用改善了异步流程控制；Generator结合Promise可实现更灵活的异步管理；而async/await作为语法糖，使异步代码具有同步代码的可读性。现代开发推荐使用async/await，配合Promise.all进行并行操作，并用try/catch处理错误。开发者应根据项目需求和兼容性要求，选择合适的异步方案，对于复杂异步逻辑

JavaScript中的同步与异步笔记-1

kidjaya的博客

07-06

308

第一次写博客，主要方便自己以后复习这个理解。之前对js的同步和异步不太清楚，只知道ajax是异步操作啥的，片面的理解异步就是页面部分刷新看到效果，而同步就是刷新页面重新加载，而没有从原理的层面学习什么是同步和异步。通过 http://www.cnblogs.com/c3gen/p/6170504.html 基本了解到了同步异步的原理js的执行过程是单线程的，单线程就代表着执行过程是一个一个执行的...

js 异步操作回调函数如何控制执行顺序

10-26

具体来说，可以在funA的成功回调函数中调用funB，这样可以确保A执行完毕后再执行B。这种模式也被称为回调地狱（callback hell），因为它可能导致代码难以维护和阅读。为了控制异步操作的执行顺序，我们还可以使用...

javascript 回调函数详解

12-01

JavaScript中的回调函数是一种重要的编程模式，它允许我们将一个函数作为参数传递给另一个函数，以便在特定条件下或事件发生时执行。这种技术广泛应用于处理异步操作，如Ajax请求、定时器（setTimeout和setInterval...

javascript带回调函数的异步脚本载入方法实例分析

10-24

首先，回调函数是JavaScript中的一个核心概念，它允许开发者将代码块作为参数传递给其他函数，在这些函数执行完特定任务后，再执行传递的代码块。在异步操作中，回调函数常被用作“完成后的动作”，它帮助我们确保在...

【JavaScript】异步编程，保证同时完成的方法

hustxiaoxian的专栏

03-08

468

一、问题来源。有一个面试的题目，比如现在有N个ajax请求，但是有个逻辑是，必须要保证前面N个请求都已经完成的情况下才能执行接下来的逻辑。如果做到呢。二、一步步来实现。 2.1、如果，我们什么都不使用。 $.ajax({ url: url1, success: function(data){ $.ajax({

javascript-concurrent-tasks:这个javascript类允许注册多个任务并在所有注册的回调完成后接受另一个回调函数来执行它

06-29

javascript并发任务 Javascript 类，允许注册多个回调以同时执行（排序）以执行单个函数。例子： var syncFuncs = new SyncFuncs ( ) ; syncFuncs . registerTask ( function ( ) { $ . ajax ( { url : 'http://www.coupondunia.in' , } ) . always ( function ( ) { console . log ( "Task 1 done" ) ; syncFuncs . markOneDone ( { id : 1 } ) ; } ) ; } ) ; syncFuncs . registerTask ( function

蓝易云：JS中使用Promise.all控制所有的异步请求都完成后，在执行后续逻辑教程

高性价比服务器就选：蓝易云

08-22

996

接受一个由Promise对象组成的数组作为参数，并返回一个新的Promise对象。该新的Promise对象将在所有的Promise对象都成功解决后才被解决，或在任意一个Promise对象被拒绝时被拒绝。函数用于发送网络请求，返回一个Promise对象。方法中，我们可以处理所有异步请求的响应数据，并在最后执行后续的逻辑。在上述示例中，我们创建了一个由三个异步请求的Promise对象组成的数组。可以有效地管理多个异步请求，并在所有请求都完成后执行后续逻辑。方法来控制所有的异步请求都完成后执行后续逻辑。

使用回调函数的方法处理异步问题，让js先执行完一个函数后再执行后面的逻辑或者方法

JulyNight的博客

11-19

2909

首先我们先来看下面的栗子： const assignmentAction = (par) =>{ let str = ''; const loop = setTimeout(() => { str = par; }, 1000); return str; } const output =

javascript 闭包环境异步模块模式，异步加载文件和回调函数取得接口

cdcdhj的博客

10-17

148

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="test">这是内容</div> <script language="javascript"> ~(function(F){ var moduleCache={}

多种异步函数执行顺序解析（如：setTimeout和promise同时存在的情况）

hyupeng1006的博客

03-24

1049

除了广义的同步任务和异步任务，我们可以分的更加精细一点： macro-task(宏任务)：包括整体代码script、setTimeout、setInterval micro-task(微任务)：Promise、process.nextTick 不同的任务会进入到不同的event queue。比如setTimeout和setInterval会进入相同的Event Queue。 s......

jQuery:多个AJAX/JSON并行请求对应一个回调函数处理方法$.when

一生为追梦的博客

09-01

3518

我知道这些函数都是异步执行并且会延迟一段时间返回，所以我想知道是否有一种方法，可有使多个AJAX/JSON并行请求，再由单个回调处理，就像JS加载器 curljs 所做的那样。很幸运! 通过jQuery.when, 我可以并发地加载多个异步请求,只执行一次回调! $.when( $.getScript('/media/js/wiki-min.js?build=21eb633'),

js 多个异步函数全部返回后执行下一步

zhanglianglily的博客

09-25

4623

array.push(api.post()) array.push(api.post()) Promise.all(array).then(arr=>{ arr.forEach(res=>{ }) })

js回调执行顺序，同步任务与异步任务，宏任务与微任务

weixin_46389390的博客

04-26

1143

JS执行顺序 JS是单线程的，即一段时间只能执行一个任务。执行一段代码，js总是按照顺序执行的，只不过在执行的过程中不会等待异步任务。同步任务与异步任务同步任务:立即执行的任务,直接被主线程读取并执行。异步任务:异步执行的任务,会交给任务队列去处理。异步任务又分为宏任务与微任务。宏任务与微任务宏任务：异步 Ajax 请求、setTimeout、setInterval、文件操作，其它宏任务。微任务：Promise.then、.catch 和 .finally，process.nextTick，其它

JavaScript中的回调函数

m0_75198698的博客

04-28

803

回调函数通常作为参数传递给另一个函数，在另一个函数执行完毕后，回调函数被自动调用。上面的示例中，`foo()`函数是一个异步函数，它会在1秒钟后打印出`foo`，然后调用回调函数`callback`。`bar()`函数是回调函数，它会在`foo()`函数执行完毕后自动被调用。当调用`foo(bar)`时，`bar()`函数作为参数传递给`foo()`函数，`foo()`函数执行完毕后会自动调用`bar()`函数。上面的示例中，当AJAX请求完成时，回调函数会被调用，并打印出请求返回的数据或错误信息。