Javascript处理循环的异步操作指南

目录
  • 案例：
  • 一、async/await处理思路
  • 二、递归处理思路
  • 总结

案例：

compute.exec()这是个异步方法,在里面处理一些实际业务，这时候打印出来的很可能就是300,300,300（因为异步for循环还没有等异步操作返回Promise对象过来i值已经改变成300了）

function getMoney(){
    var money=[100,200,300]
    for(let i=0; i<money.length; i++){
        compute.exec().then(()=>{
            console.log(money[i])
        })
    }
}

一、async/await 处理思路

async function getMoney(){
    var money=[100,200,300]
    for( let i=0; i<money.length; i++){
        await compute.exec().then(()=>{
            console.log(money[i])
        })
    }
}
// async告诉getMoney方法里面存在异步的操作
// await放在具体异步操作（方法）前面，意思是等待该异步返回Promise才会继续后面的操作

二、递归处理思路

function getMoney(i) {
　　var money=[100,200,300]
　　compute.exec().then(() => {
　　　　if ( i < money.length ) {
　　　 　　console.log(money[i]);
　　　 　　i++;
      　　getMoney(i);
    　　}
  　});
}
getMoney(0);//开始调用
//用递归来实现自我循环（具体循环在then里面，可以确保前面的compute.exec()的异步操作完成）.then()是返回了Promise对象为resolve后才进行的（可以了解一下Promise对象）

总结

到此这篇关于Javascript处理循环的异步操作的文章就介绍到这了,更多相关Javascript循环异步操作内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js实现异步循环实现代码

    问题 实现异步循环时,你可能会遇到问题. 让我们试着写一个异步方法,一次循环打印一次循环的索引值. <script> for(var i = 0; i < 5; i++){ setTimeout(function(){ document.writeln(i);document.writeln("<br />"); },1000); } </script> 如上程序的输出为: 5 5 5 5 5 原因 每次时间结束(timeout)都指向原始的i

  • Javascript处理循环的异步操作指南

    目录 案例: 一.async/await处理思路 二.递归处理思路 总结 案例: compute.exec()这是个异步方法,在里面处理一些实际业务,这时候打印出来的很可能就是300,300,300(因为异步for循环还没有等异步操作返回Promise对象过来i值已经改变成300了) function getMoney(){ var money=[100,200,300] for(let i=0; i<money.length; i++){ compute.exec().then(()=>{

  • JavaScript事件循环同步任务与异步任务

    JavaScript事件循环同步任务与异步任务

    目录 前言 执行栈与任务队列 执行栈 任务队列 同步任务与异步任务 同步任务 异步任务 js的执行机制 结语 前言 首先,在学习js中同步异步的问题前,需要明白,js是单线程的,为什么它得是单线程的呢?这得从它的使用场景来看了,它主要是用来让用户与页面进行交互的吧.那么假设js是多线程的,在这个线程里面,用户点击某个按钮会增加一个DOM节点,在另一个线程里面,用户点击这个按钮又会删除一个DOM节点,那么此时js就不知道该听谁的了.那同步异步的出现又是为了什么呢?假设没有异步,那么我们在向服务器请

  • 详解JavaScript for循环中发送AJAX请求问题

    详解JavaScript for循环中发送AJAX请求问题

    首先说,出现这个问题的场景是很少见的,因为有太多更好解决方法.今天搞ajax的时候,一个有趣的地方,,每个迭代中都要发送一个get请求,因为迭代的速度太快,一个请求还没有完成就进行下一个迭代,在chrome和ff上,除最后一个请求外,其它请求都被取消了.所以该怎么办呢?设置延时(不太好)还是其他办法?  办法有很多,比如设置休眠,迭代等等, 我采用的是另外两种解决办法.  一.同步的ajax请求,而ajax请求默认是异步的,所以要设置为false. function creatXMLHttpRe

  • javascript事件循环event loop的简单模型解释与应用分析

    本文实例讲述了javascript事件循环event loop的简单模型解释与应用.分享给大家供大家参考,具体如下: js是单线程的,但是event loop的出现,使得js拥有可以处理高并发的性能.那么怎么理解event loop呢?网上百度一堆文章,什么heap,stack,micro queue,macro queue,让初学者直接懵掉.这里采用很通俗的理解方式介绍下event loop. event loop顾名思义是事件循环,既然是循环,那循环的是什么呢? 对于一个js文件, 1,执行

  • 深入分析JavaScript 事件循环(Event Loop)

    事件循环(Event Loop),是每个JS开发者都会接触到的概念,但是刚接触时可能会存在各种疑惑. 众所周知,JS是单线程的,即同一时间只能运行一个任务.一般情况下这不会引发问题,但是如果我们有一个耗时较多的任务,我们必须等该任务执行完毕才能进入下一个任务,然而等待的这段时间常常让我们无法忍受,因为我们这段时间什么都不能做,包括页面也是锁死状态. 好在,时代在进步,浏览器向我们提供了JS引擎不具备的特性:Web API.Web API包括DOM API.定时器.HTTP请求等特性,可以帮助我们

  • 在实例中重学JavaScript事件循环

    单线程的JS 众所周知js是一门单线程语言,即同一时间只能做一件事.为什么js是单线程的呢,主要与它的用途有关. 作为浏览器脚本语言,js的主要用途是和用户互动&操作DOM,我们并不想并行的操作DOM.如果不是单线程的话,我们一个线程在给DOM节点上添加内容,另一个线程却删除了这个节点,到底该以哪个为准呢? 所以为了避免复杂性,从一诞生,JavaScript 就是单线程. 事件循环(event loop) JS是一门单线程语言,意味着代码要一行一行的执行.所有任务都要排队,前一个任务结束,才会执

  • JavaScript的单线程和异步详细

    JavaScript的单线程和异步详细

    目录 一.任务队列 二.借以解释几个容易困惑的问题 1.setTimeout(f1,0)是什么鬼 2.Ajax请求是否异步 3.界面渲染线程是单独开辟的线程 三.如何利用浏览器的异步机制 四.异步的好处和适合的场景 前言: 说到JavaScript的单线程(single threaded)和异步(asynchronous),很多同学不禁会想,这不是自相矛盾么?其实,单线程和异步确实不能同时成为一个语言的特性.js选择了成为单线程的语言,所以它本身不可能是异步的,但js的宿主环境(比如浏览器,No

  • 一篇文章让你搞清楚JavaScript事件循环

    一篇文章让你搞清楚JavaScript事件循环

    目录 前言 宏任务 微任务 事件循环 宏任务与微任务 总结 参考资料 前言 异步函数也是有执行顺序的.本质上来说,JavaScript是单线程语言,不管是在浏览器中还是nodejs环境下.浏览器在执行js代码和渲染DOM节点都是在同一个线程中,执行js代码就无法渲染DOM,渲染DOM的时候就无法执行js代码.如果按照这种同步方式执行,页面的渲染将会出现白屏甚至是报错,特别是遇到一些耗时比较长的网络请求或者js代码,因此在实际开发中一般是通过异步的方式解决. 什么是异步?js是一步一步执行代码的,

  • JavaScript三大重点同步异步与作用域和闭包及原型和原型链详解

    JavaScript三大重点同步异步与作用域和闭包及原型和原型链详解

    目录 1. 同步.异步 2. 作用域.闭包 闭包 作用域 3. 原型.原型链 原型(prototype) 原型链 如图所示,JS的三座大山: 同步.异步 作用域.闭包 原型.原型链 1. 同步.异步 JavaScript执行机制,重点有两点: JavaScript是一门单线程语言 Event Loop(事件循环)是JavaScript的执行机制 JS为什么是单线程 最初设计JS是用来在浏览器验证表单操控DOM元素的是一门脚本语言,如果js是多线程的,那么两个线程同时对一个DOM元素进行了相互冲突

  • JavaScript事件循环剖析宏任务与微任务

    目录 前言 引言 为什么会有事件循环? JS是单线程的 同步任务和异步任务 JS事件循环 宏任务与微任务 常见的宏任务有哪些? 常见的微任务有哪些? 执行过程总结(重点) 同步任务 —> 微任务 —> 宏任务... 案例挑战 案例1: 案例2: 案例3: 前言 相信对于刚学习JavaScript的新手来说,去理解JS中的事件循环原理以及异步执行过程比较困难,但是这是JS必须要会的基础知识,逃避不能解决问题,笔者曾经也被这个知识点困扰过,现根据以往的经验编写此文章,旨在帮助大家彻底搞懂它们以及自

随机推荐