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

 更新时间:2022年03月16日 09:14:40   作者:曼联的小黑熊  
这篇文章主要给大家介绍了关于Javascript处理循环的异步操作的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下

案例:

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循环异步操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript中数组(Array)对象和字符串(String)对象的常用方法总结

    javascript中数组(Array)对象和字符串(String)对象的常用方法总结

    这篇文章主要介绍了javascript中数组(Array)对象和字符串(String)对象的常用方法,结合实例形式总结分析了javascript中关于数组和字符串的常用函数与使用技巧,需要的朋友可以参考下
    2016-12-12
  • javascript实现日期格式转换

    javascript实现日期格式转换

    这篇文章主要介绍了javascript实现日期格式转换,非常的简单实用,项目中经常可以用到,这里推荐给大家
    2014-12-12
  • JS实现拖动滚动条评分的效果代码分享

    JS实现拖动滚动条评分的效果代码分享

    本文给大家基于js实现拖动滚动条评分效果,在项目开发中经常可以用到的,大家可以更加需要适当的添加修改,对js评分效果感兴趣的朋友一起看看吧
    2016-09-09
  • 表格单元格交错着色实现思路及代码

    表格单元格交错着色实现思路及代码

    重点在于:以空间换时间,循环确定所着颜色;base确定起始颜色,i确定本次需要着色的单元格,感兴趣的朋友可以参考下哈
    2013-04-04
  • springMVC结合AjaxForm上传文件

    springMVC结合AjaxForm上传文件

    这篇文章主要为大家详细介绍了springMVC结合AjaxForm上传文件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 使用JS获取SessionStorage的值

    使用JS获取SessionStorage的值

    这篇文章给大家介绍了使用js获取sessionstorage中的值,首先获取它是为了将获得的信息输出或者alert(),其次,在静态页面中,如果使用sessionStorage就相当于在动态页面里连接了数据库一样,具体内容详情大家参考下本文
    2018-01-01
  • webpack打包html里面img后src为“[object Module]”问题

    webpack打包html里面img后src为“[object Module]”问题

    这篇文章主要介绍了webpack打包html里面img后src为“[object Module]”问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 深入理解javascript中defer的作用

    深入理解javascript中defer的作用

    这篇文章主要是对javascript中defer的作用进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • three.js利用射线Raycaster进行碰撞检测

    three.js利用射线Raycaster进行碰撞检测

    这篇文章主要为大家详细介绍了three.js利用射线Raycaster进行碰撞检测,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • Openlayers实现测量功能

    Openlayers实现测量功能

    这篇文章主要为大家详细介绍了Openlayers实现测量功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09

最新评论